滤波器阵列使用复选框以AngularJS [英] Filter Array Using Checkboxes with AngularJS

问题描述

我有以下的code，其中我试图通过检查玩家的pantsize复选框阵列中的球员进行过滤。

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.

我知道我有一个中继器的数据数组，然后将数据数组元素（两个不同的div）以外的元素中的过滤输入，这会是什么引起的脱节？因为我注意到，当我的复选框添加到中继器元素我得到某种形式的反馈阵列，当我点击复选框。

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.

所以，现在的IM深入到角社区与复选框过滤的文件不包括这个话题很好的帮助不大。

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.

下面是小提琴： 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);    

}

任何及所有帮助/建议是真诚的AP preciated。

Any and all help/advice is sincerely appreciated.

感谢。

推荐答案

编辑2

每OP的所有请求，这里是最终状态。

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

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

修改（OP增加赏金）

根据您的赏金，就是你想要这个吗？

Per your bounty, is this what you wanted?

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

这是你想要的吗？

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

模板

<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>

脚本

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);
        };
    });

这篇关于滤波器阵列使用复选框以AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！