current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite
5

I have the following code where i'm trying to filter on the players in the array by checking a checkbox for the pantsize of a player.

I know i have the data array in a repeater, and then the filtering inputs in an element outside of the data array element (two different divs), could this be what's causing the disconnect? Because i notice when i add the checkbox to the repeater element i do get some form of feedback array when i click the checkbox.

Binding a search input box was so easy to implement, however i'm spending way too much time getting this simple checkbox to filter the data.

So im now reaching out to the Angular community for a little help on filtering with checkboxes as the documentation does not cover this topic very well.

Here is the fiddle: http://jsfiddle.net/rzgWr/1/

<div ng-controller="MyCtrl">
<div>
<div ng-repeat="pants in players | groupBy:'pants'">
    <b><input type="checkbox" ng-model="query"/>{{pants}}</b>
    <span>({{(players | filter:pants).length}})</span>
</div>

<div>
    <ul>
    <li ng-repeat="player in players | filter:query">
        <p><b>{{player.name}}</b></p>
        <p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
    </li>
    </ul>    
</div>
</div>


function MyCtrl($scope, filterFilter) {
$scope.players = [
    {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
    {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
    {name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
    {name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
]; 

$scope.$watch('filtered', function (newValue) {
    if (angular.isArray(newValue)) {
        console.log(newValue.length);
    }
}, true);

}

Any and all help/advice is sincerely appreciated.

Thanks.

share|improve this question
    
do you mean when you search something, the binding next to checkbox is updated? –  KrishnaDhungana Jan 11 '14 at 4:59

1 Answer 1

up vote 14 down vote accepted
+50

EDIT 2

Per all the requests of the OP, here is the final state.

http://jsfiddle.net/rzgWr/19/

EDIT (OP added a bounty)

Per your bounty, is this what you wanted?

http://jsfiddle.net/rzgWr/17/

Is this what you wanted?

http://jsfiddle.net/rzgWr/12/

Template

<div ng-controller="MyCtrl">
    <div>
      <div>
          Search: <input name="company" type="text" class="search-input" ng-model="query"/>
       </div>
    <div ng-init="pantsGroup = (players | groupBy:'pants')">
        <div ng-repeat="pants in pantsGroup" >
            <b><input type="checkbox" ng-model="usePants[$index]"/>{{pants}}</b>
            <span>({{(players | filter:pants).length}})</span>
        </div>
    </div>

    <div>
        <ul>
        <li ng-repeat="player in players | filter:query | filter:filterPants(player)">
            <p><b>{{player.name}}</b></p>
            <p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
        </li>
        </ul>    
    </div>
    </div>
</div>

Script

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, filterFilter) {
    $scope.usePants = [];

    $scope.filterPants = function (player) {
        return function (p) {
            for (var i in $scope.usePants) {
                if (p.pants == $scope.pantsGroup[i] && $scope.usePants[i]) {
                    return true;
                }
            }
        };
    };

    $scope.players = [
        {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Rodman', shirt: 'XXL', pants: '42', shoes: '11'},
        {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Will Will', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},        
        {name: 'One More', shirt: 'M', pants: '32', shoes: '9'},        
        {name: 'Player One', shirt: 'XXL', pants: '42', shoes: '11'},
        {name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
    ]; 

    $scope.$watch('filtered', function (newValue) {
        if (angular.isArray(newValue)) {
            console.log(newValue.length);
        }
    }, true);    
}

myApp.filter('count', function() {
    return function(collection, key) {
      var out = "test";
      for (var i = 0; i < collection.length; i++) {
          //console.log(collection[i].pants);
          //var out = myApp.filter('filter')(collection[i].pants, "42", true);
      }
      return out;
    }
});

var uniqueItems = function (data, key) {
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
};

myApp.filter('groupBy',
            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);
        };
    });
share|improve this answer
1  
Like this? jsfiddle.net/rzgWr/13 –  Words Like Jared Jan 12 '14 at 23:36
1  
Words: When i try this functionality now with data from the server, the filtering no longer works because the ng-init is running not able to run the expression on dynamic data. Any thoughts on what i could use instead of ng-init? Thanks. –  Antonio Herrera Jan 15 '14 at 16:31
1  
Yeah I used that so I wouldn't have to inject the $filter service into the controller. Here's all you need to do: jsfiddle.net/rzgWr/16 –  Words Like Jared Jan 15 '14 at 16:49
1  
I suppose either solution would work, as long as cascade filtering is narrowing the array data. Ideally i'd like the filters update according to the remaining data. So if for example Shoes: M is filtered and only pants sizes of Small and Medium remain in the filtered data, then only the Pants filters for Small and Medium are visible and available for further filtering. Does that help at all? –  Antonio Herrera Jan 15 '14 at 19:29
2  
What you have done is simply magnificent! You have added tremendous value to this forum for the topic of Angular and i am more than happy to award you the bounty! :) –  Antonio Herrera Jan 16 '14 at 21:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.