我有以下代码,通过检查球员的裤子大小复选框,尝试对阵列中的球员进行过滤。
我知道我在转发器中有数据数组,然后在数据数组元素(两个不同的div)之外的元素中过滤输入,这可能是导致断开连接的原因吗?因为当我将复选框添加到Repeater元素时我注意到,所以当我单击复选框时,确实会得到某种形式的反馈数组。
绑定搜索输入框非常容易实现,但是我花了太多时间获取这个简单的复选框来过滤数据。
因此,我现在正在向Angular社区寻求帮助,以使用复选框进行过滤,因为文档并未很好地涵盖该主题。
这是小提琴: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);
}
衷心感谢您提供的所有帮助/建议。
谢谢。
编辑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); }; });