Question

在我的jsfidle示例中，您可以看到我的疑问。

如何计算它的数量并且只在我看来一次而不是重复。

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

我的控制器

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

示例图片

Image

Answer 1

添加新功能以获取不同的项目，即getDistinctValue

请查看以下摘录..

(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 个答案: