web-dev-qa-db-ja.com

AngularJSでチェックボックスを使用して配列をフィルタリングする

プレーヤーのパンツサイズのチェックボックスをオンにして、配列内のプレーヤーをフィルタリングしようとしている次のコードがあります。

リピーターにデータ配列があり、データ配列要素の外側の要素（2つの異なるdiv）にフィルタリング入力があることを知っていますが、これが切断の原因である可能性がありますか？チェックボックスをリピーター要素に追加すると、チェックボックスをクリックすると何らかの形のフィードバック配列が表示されることに気付くためです。

検索入力ボックスのバインドは非常に簡単に実装できましたが、この単純なチェックボックスを使用してデータをフィルタリングするのに時間がかかりすぎています。

そのため、ドキュメントではこのトピックが十分にカバーされていないため、チェックボックスを使用したフィルタリングについて少し助けを求めて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);

}

ありとあらゆるヘルプ/アドバイスに心から感謝します。

ありがとう。

jsonangularjscheckboxfilter
12
Tony H.

編集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);
        };
    });
27
Words Like Jared

完全に最適化されたjsコード

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

var uniqueItems = function (data, key) {
    var result = [];

    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

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

    }
    return result;
};

var fliter = function(totalData,selectedData,equalData){
    var filterAfter = [];   
    selected = false;
    for (var j in totalData) {
        var p = totalData[j];
        for (var i in selectedData) {
            if (selectedData[i]) {
                selected = true;
                if (i == p[equalData]) {
                    filterAfter.Push(p);
                    break;
                }
            }
        }        
    }
    if (!selected) {
        filterAfter = totalData;
    }

    return filterAfter;
}

function MyCtrl($scope, filterFilter) {

    $scope.usePants = {};
    $scope.useShirts = {};
    $scope.useShoes = {};

    $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'}
    ]; 

    // Watch the pants that are selected
    $scope.$watch(function () {
        return {
            players: $scope.players,
            usePants: $scope.usePants,
            useShirts: $scope.useShirts,
            useShoes: $scope.useShoes
        }
    }, function (value) {

            $scope.count = function (prop, value) {
                return function (el) {
                    return el[prop] == value;
                };
            };

            $scope.pantsGroup = uniqueItems($scope.players, 'pants');
            $scope.shirtsGroup = uniqueItems($scope.players, 'shirt');
            $scope.shoesGroup = uniqueItems($scope.players, 'shoes');

            var fliterType = [{selected : $scope.usePants,fliter : 'pants'},{selected : $scope.useShirts,fliter : 'shirt'},{selected : $scope.useShoes,fliter : 'shoes'}];

            var startFliter = $scope.players;

            for(var i in fliterType){
                var startFliter = fliter(startFliter,fliterType[i].selected,fliterType[i].fliter);
            }

            $scope.filteredPlayers = startFliter;

        }, true);}
0
Balakumaran