AngularJS：如何计算过滤器项

Question

In my example jsfidle you can see my doubt. 在我的jsfidle示例中，您可以看到我的疑问。

How do I get it to count the number of it and only appears to me once and not repeatedly. 我如何计算它的数量，并且只对我出现一次，而不是反复出现。

My Html: 我的HTML：

<section class="left" style="border-right:1px">  
    <div class="filter">
    Pant Size
    <div>
        <div ng-repeat="professionalarea in pantsGroup">
            <b><input type="checkbox" ng-model="usePants[professionalarea.description]"/>{{professionalarea.description}}</b>
            <span>({{(filteredPlayers | filter:professionalarea).length}})</span>
        </div>
    </div>
    </div>
    </section>

My controller 我的控制器

$scope.$watch(function () {
    return {
        players: $scope.players,
        usePants: $scope.usePants
    }
}, function (value) {
    var selected;

    //here i want call professionalarea.description and don't pants
    $scope.pantsGroup = uniqueItems($scope.players, 'professionalarea');
    var filterAfterPants = [];        
    selected = false;
    for (var j in $scope.players) {
        var p = $scope.players[j];
        for (var i in $scope.usePants) {
            if ($scope.usePants[i]) {
                selected = true;
                if (i == p.professionalarea.description) {
                    filterAfterPants.push(p);
                    break;
                }
            }
        }        
    }
    if (!selected) {
        filterAfterPants = $scope.players;
    }

    $scope.filteredPlayers = filterAfterPants;        
}, true);

Example Image 范例图片

Image 图片

Answer 1

Added new function to get distinct items ie getDistinctValue 添加了新功能以获取不同的项，即getDistinctValue

Please find following snippet.. 请找到以下片段。

 (function () { 'use strict'; var myApp = angular.module('myApp', []); var uniqueItems = function (data, key) { var result = new Array(); for (var i = 0; i < data.length; i++) { var value = data[i][key]; console.log(value); if (result.indexOf(value) == -1) { result.push(value); } } return result; }; function getDistinctValue(items) { var lookup = {}; var result = []; for (var item, i = 0; item = items[i++];) { var name = item.professionalarea.description; if (!(name in lookup)) { lookup[name] = 1; result.push(name); } } return result; } myApp.service('fileUpload', ['$http', function ($http) { this.uploadFileToUrl = function (file, uploadUrl) { var fd = new FormData(); fd.append('file', file); $http.post(uploadUrl, fd, { transformRequest: angular.identity, headers: { 'Content-Type': undefined } }) .success(function () { }) .error(function () { }); } }]); myApp.controller('myCtrl', ['$scope', function ($scope) { $scope.usePants = {}; $scope.players = [ { name: 'Bruce Wayne', shirt: 'XXL', pants: '42', professionalarea: { idAreaProfissional: 1, description: "IT" }, shoes: '12' }, { name: 'Bruce Wayne', shirt: 'XXL', pants: '28', professionalarea: { idAreaProfissional: 1, description: "test" }, shoes: '12' }, { name: 'Bruce Wayne', shirt: 'XXL', pants: '35', professionalarea: { idAreaProfissional: 1, description: "IT" }, shoes: '12' } ]; // Watch the pants that are selected $scope.$watch(function () { return { players: $scope.players, usePants: $scope.usePants } }, function (value) { var selected; //here i want call professionalarea.description and don't pants $scope.pantsGroup = getDistinctValue($scope.players); var filterAfterPants = []; selected = false; for (var j in $scope.players) { var p = $scope.players[j]; for (var i in $scope.usePants) { if ($scope.usePants[i]) { selected = true; if (i == p.professionalarea.description) { filterAfterPants.push(p); break; } } } } if (!selected) { filterAfterPants = $scope.players; } $scope.filteredPlayers = filterAfterPants; }, true); $scope.$watch('filtered', function (newValue) { if (angular.isArray(newValue)) { console.log(newValue.length); } }, true); }]); myApp.filter('groupBy', function () { return function (collection, key) { if (collection === null) return; return uniqueItems(collection, key); }; }); })();

 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="app.js" type="text/javascript"></script> <style> .gridStyle { border: 1px solid rgb(212, 212, 212); margin-left: 15px; width: 97%; height: 130px; float: left; font-weight: normal; padding: 35px 10px 10px 10px; } </style> <title>Upload </title> </head> <body ng-app="myApp"> <div ng-controller="myCtrl"> <div> <section class="left" style="border-right:1px"> <div class="filter"> Pant Size <div> <div ng-repeat="professionalarea in pantsGroup"> <b><input type="checkbox" ng-model="usePants[professionalarea]" />{{professionalarea}}</b> <span>({{filteredPlayers.length}})</span> </div> </div> </div> </section> <section class="right" style="border-right:1px"> <div> <ul> <li ng-repeat="player in filteredPlayers | filter:query"> <p><b>Player: {{player.name}}</b></p> <p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p> </li> </ul> </div> </section> </div> </div> </body> </html>

AngularJS：如何计算过滤器项

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-11-21 12:18:06

AngularJS：如何计算过滤器项

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-11-21 12:18:06

解决方案1
0 已采纳 2016-11-21 12:18:06