Question

我想在控制器中按唯一类别过滤数组，然后在html页面中使用带有ng-repeat的过滤数组。我的阵列是：

$scope.tabs = [
                {OBJECTID:1, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Home"},
                {OBJECTID:2, TYPES:8, Category:"Opticians",Name_EN:"antonis" , text : "Games"},
                {OBJECTID:3, TYPES:8, Category:"Doctors", Name_EN:"antonis" , text : "Mail"},
                {OBJECTID:4, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Car"},
                {OBJECTID:5, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Profile"},
                {OBJECTID:6, TYPES:8, Category:"Clinics", Name_EN:"antonis" , text : "Favourites"},
                {OBJECTID:7, TYPES:8, Category:"Pharmacies",Name_EN:"antonis" , text : "Chats"},
                {OBJECTID:8, TYPES:4, Category:"Sights",Name_EN:"antonis" , text : "Settings"},
                {OBJECTID:9, TYPES:4, Category:"Meuseums",Name_EN:"antonis"  ,text : "Home"},
                {OBJECTID:10, TYPES:4, Category:"Meuseums",Name_EN:"antonis1" , text : "Home"}  

            ];

过滤后的数组将如下所示：

$scope.FilteredArray = [
                {Category:"Pharmacies"},
                {Category:"Opticians"},
                {Category:"Doctors"},
                {Category:"Clinics"},
                {Category:"Sights"},
                {Category:"Meuseums"},

            ];

提前致谢。

Answer 1

在unique内使用filter controller并在过滤后的数组上应用ng-repeat

//Filtered array
      $scope.filteredArray =  $filter('unique')($scope.tabs,'Category');

<ul>
    <li ng-repeat="tab in filteredArray">{{tab.Category}}</li>
</ul>

过滤

angular.module('myapp').filter('unique', function () {

  return function (items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function (item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function (item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});

<强> FULL EXAMPLE

Answer 2

你也可以在没有角度过滤器的情况下进行。如果您在角度应用程序中使用了lodash模块，则只需使用lodash函数即可。它将通过您想要的任何键返回uniq记录。

_.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
// => [{ 'x': 1 }, { 'x': 2 }]

Answer 3

你也可以这样做，

  $scope.unique = {};
  $scope.distinct = [];
  for (var i in $scope.tabs) {
    if (typeof($scope.unique[$scope.tabs[i].Category]) == "undefined") {
      $scope.distinct.push($scope.tabs[i].Category);
    }
    $scope.unique[$scope.tabs[i].Category] = 0;
  }

<强> DEMO

Answer 4

使用默认的唯一过滤器：

<select ng-model="tab" ng-repeat="uni in tabs | unique:'Category'">
</select>

Answer 5

该代码可用于创建一个方法，这将为您提供一个字符串数组，您也可以修改它以创建对象数组 -

var flags = [], $scope.FilteredArray= [], l = $scope.tabs.length, i;
for( i=0; i<l; i++) {
    if( flags[$scope.tabs[i].Category]) continue;
    flags[$scope.tabs[i].Category] = true;
    $scope.FilteredArray.push($scope.tabs[i].Category);
}

如何在AngularJS中的控制器中使用唯一过滤器

5 个答案: