AngularJS：如何計算過濾器項目

Question

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

My jsfiddle

如何獲得它來計算它的數量，只出現了我一次，不重複。

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