问

使用带AngularJS的复选框过滤数组

钟z4z萍发布于 2023-02-04 14:55

数组

我有以下代码,我试图通过选中玩家裤子的复选框来过滤阵列中的玩家.

我知道我在转发器中有数据数组,然后在数据数组元素之外的元素(两个不同的div)中的过滤输入,这可能是导致断开连接的原因吗？因为我注意到当我将复选框添加到转发器元素时,我会在单击复选框时获得某种形式的反馈数组.

绑定搜索输入框非常容易实现,但是我花了太多时间来获取这个简单的复选框来过滤数据.

所以我现在正在向Angular社区寻求关于过滤复选框的一点帮助,因为文档没有很好地涵盖这个主题.

这是小提琴:http://jsfiddle.net/rzgWr/1/




    {{pants}}
    ({{(players | filter:pants).length}})



    
    
        {{player.name}}
        {{player.shirt}} {{player.pants}}, {{player.shoes}}

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

}

任何和所有的帮助/建议是真诚的感谢.

谢谢.

1 个回答

编辑2

根据OP的所有请求,这是最终状态.

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

编辑(OP增加了赏金)

根据你的赏金,这是你想要的吗？

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()">
            <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 () {
        return function (p) {
            for (var i in $scope.usePants) {
                return (p.pants == $scope.pantsGroup[i] && $scope.usePants[i]);
            }
        };
    };

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

2023-02-04 14:56 回答

朵朵妞er

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签