Tôi đang chạy đơn giản ng-repeat tệp JSON và muốn lấy tên danh mục. Có khoảng 100 đối tượng, mỗi đối tượng thuộc một danh mục - nhưng chỉ có khoảng 6 danh mục.

Mã hiện tại của tôi là:

<select ng-model="orderProp" >
  <option ng-repeat="place in places" value="{{place.category}}">{{place.category}}</option>
</select>

Đầu ra là 100 tùy chọn khác nhau, chủ yếu là trùng lặp. Làm cách nào để sử dụng Angular để kiểm tra xem {{place.category}}đã tồn tại chưa và không tạo tùy chọn nếu nó đã ở đó?

chỉnh sửa: Trong javascript của tôi $scope.places = JSON data, chỉ để làm rõ

Bạn có thể sử dụng bộ lọc duy nhất từ AngularUI (mã nguồn có sẵn ở đây: Bộ lọc duy nhất AngularUI ) và sử dụng trực tiếp trong các tùy chọn ng (hoặc ng-repeat).

<select ng-model="orderProp" ng-options="place.category for place in places | unique:'category'">
    <option value="0">Default</option>
    // unique options from the categories
</select>

Hoặc bạn có thể viết bộ lọc của riêng bạn bằng cách sử dụng lodash.

app.filter('unique', function() {
    return function (arr, field) {
        return _.uniq(arr, function(a) { return a[field]; });
    };
});

Bạn có thể sử dụng bộ lọc 'unique' (aliases: uniq) trong mô-đun angular.filter

cách sử dụng: colection | uniq: 'property'
bạn cũng có thể lọc theo các thuộc tính lồng nhau: colection | uniq: 'property.nested_property'

Những gì bạn có thể làm, là một cái gì đó như thế ..

function MainController ($scope) {
 $scope.orders = [
  { id:1, customer: { name: 'foo', id: 10 } },
  { id:2, customer: { name: 'bar', id: 20 } },
  { id:3, customer: { name: 'foo', id: 10 } },
  { id:4, customer: { name: 'bar', id: 20 } },
  { id:5, customer: { name: 'baz', id: 30 } },
 ];
}

HTML: Chúng tôi lọc theo id khách hàng, nghĩa là xóa khách hàng trùng lặp

<th>Customer list: </th>
<tr ng-repeat="order in orders | unique: 'customer.id'" >
   <td> {{ order.customer.name }} , {{ order.customer.id }} </td>
</tr>

kết quả
Danh sách khách hàng:
foo 10
bar 20
baz 30

mã này làm việc cho tôi.

app.filter('unique', function() {

  return function (arr, field) {
    var o = {}, i, l = arr.length, r = [];
    for(i=0; i<l;i+=1) {
      o[arr[i][field]] = arr[i];
    }
    for(i in o) {
      r.push(o[i]);
    }
    return r;
  };
})

và sau đó

var colors=$filter('unique')(items,"color");

Nếu bạn muốn liệt kê các danh mục, tôi nghĩ bạn nên nói rõ ý định của mình trong chế độ xem.

<select ng-model="orderProp" >
  <option ng-repeat="category in categories"
          value="{{category}}">
    {{category}}
  </option>
</select>

trong bộ điều khiển:

$scope.categories = $scope.places.reduce(function(sum, place) {
  if (sum.indexOf( place.category ) < 0) sum.push( place.category );
  return sum;
}, []);

Đây là một ví dụ đơn giản và chung chung.

Bộ lọc:

sampleApp.filter('unique', function() {

  // Take in the collection and which field
  //   should be unique
  // We assume an array of objects here
  // NOTE: We are skipping any object which
  //   contains a duplicated value for that
  //   particular key.  Make sure this is what
  //   you want!
  return function (arr, targetField) {

    var values = [],
        i, 
        unique,
        l = arr.length, 
        results = [],
        obj;

    // Iterate over all objects in the array
    // and collect all unique values
    for( i = 0; i < arr.length; i++ ) {

      obj = arr[i];

      // check for uniqueness
      unique = true;
      for( v = 0; v < values.length; v++ ){
        if( obj[targetField] == values[v] ){
          unique = false;
        }
      }

      // If this is indeed unique, add its
      //   value to our values and push
      //   it onto the returned array
      if( unique ){
        values.push( obj[targetField] );
        results.push( obj );
      }

    }
    return results;
  };
})

Đánh dấu:

<div ng-repeat = "item in items | unique:'name'">
  {{ item.name }}
</div>
<script src="your/filters.js"></script>

Tôi quyết định mở rộng câu trả lời của @ thethakuri để cho phép bất kỳ chiều sâu nào cho thành viên duy nhất. Đây là mã. Điều này dành cho những người không muốn bao gồm toàn bộ mô-đun AngularUI chỉ cho chức năng này. Nếu bạn đã sử dụng AngularUI, hãy bỏ qua câu trả lời này:

app.filter('unique', function() {
    return function(collection, primaryKey) { //no need for secondary key
      var output = [], 
          keys = [];
          var splitKeys = primaryKey.split('.'); //split by period


      angular.forEach(collection, function(item) {
            var key = {};
            angular.copy(item, key);
            for(var i=0; i<splitKeys.length; i++){
                key = key[splitKeys[i]];    //the beauty of loosely typed js :)
            }

            if(keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
            }
      });

      return output;
    };
});

Thí dụ

<div ng-repeat="item in items | unique : 'subitem.subitem.subitem.value'"></div>

Tôi đã có một chuỗi các chuỗi, không phải các đối tượng và tôi đã sử dụng phương pháp này:

ng-repeat="name in names | unique"

với bộ lọc này:

angular.module('app').filter('unique', unique);
function unique(){
return function(arry){
        Array.prototype.getUnique = function(){
        var u = {}, a = [];
        for(var i = 0, l = this.length; i < l; ++i){
           if(u.hasOwnProperty(this[i])) {
              continue;
           }
           a.push(this[i]);
           u[this[i]] = 1;
        }
        return a;
    };
    if(arry === undefined || arry.length === 0){
          return '';
    }
    else {
         return arry.getUnique(); 
    }

  };
}

CẬP NHẬT

Tôi đã giới thiệu lại việc sử dụng Set nhưng xin lỗi, điều này không hoạt động đối với ng-repeat, cũng như Map vì ng-repeat chỉ hoạt động với mảng. Vì vậy, bỏ qua câu trả lời này. Dù sao, nếu bạn cần lọc ra các bản sao một cách như cách khác đã nói angular filters, đây là liên kết cho phần bắt đầu .

Câu trả lời cũ

Bạn có thể sử dụng cấu trúc dữ liệu Set tiêu chuẩn ECMAScript 2015 (ES6) , thay vì Cấu trúc dữ liệu mảng theo cách này bạn lọc các giá trị lặp lại khi thêm vào Set. (Nhớ các bộ không cho phép lặp lại các giá trị). Thực sự dễ sử dụng:

var mySet = new Set();

mySet.add(1);
mySet.add(5);
mySet.add("some text");
var o = {a: 1, b: 2};
mySet.add(o);

mySet.has(1); // true
mySet.has(3); // false, 3 has not been added to the set
mySet.has(5);              // true
mySet.has(Math.sqrt(25));  // true
mySet.has("Some Text".toLowerCase()); // true
mySet.has(o); // true

mySet.size; // 4

mySet.delete(5); // removes 5 from the set
mySet.has(5);    // false, 5 has been removed

mySet.size; // 3, we just removed one value

Đây là một cách duy nhất để làm điều đó (mặc dù nó không duy trì thứ tự). Thêm vào đó, kết quả cũng sẽ được yêu cầu, rất hữu ích trong hầu hết các trường hợp:

<select ng-model="orderProp" >
   <option ng-repeat="place in places | orderBy:'category' as sortedPlaces" data-ng-if="sortedPlaces[$index-1].category != place.category" value="{{place.category}}">
      {{place.category}}
   </option>
</select>

Không có bộ lọc nào ở trên khắc phục được sự cố của tôi nên tôi phải sao chép bộ lọc từ tài liệu github chính thức . Và sau đó sử dụng nó như được giải thích trong các câu trả lời ở trên

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

Hàm trả về (mục, bộ lọcOn) {

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;
  };

});

Có vẻ như mọi người đang ném phiên bản uniquebộ lọc của riêng họ vào vòng, vì vậy tôi cũng sẽ làm như vậy. Phê bình rất được hoan nghênh.

angular.module('myFilters', [])
  .filter('unique', function () {
    return function (items, attr) {
      var seen = {};
      return items.filter(function (item) {
        return (angular.isUndefined(attr) || !item.hasOwnProperty(attr))
          ? true
          : seen[item[attr]] = !seen[item[attr]];
      });
    };
  });

Nếu bạn muốn nhận dữ liệu duy nhất dựa trên khóa lồng nhau:

app.filter('unique', function() {
        return function(collection, primaryKey, secondaryKey) { //optional secondary key
          var output = [], 
              keys = [];

          angular.forEach(collection, function(item) {
                var key;
                secondaryKey === undefined ? key = item[primaryKey] : key = item[primaryKey][secondaryKey];

                if(keys.indexOf(key) === -1) {
                  keys.push(key);
                  output.push(item);
                }
          });

          return output;
        };
    });

Gọi nó như thế này:

<div ng-repeat="notify in notifications | unique: 'firstlevel':'secondlevel'">

Thêm bộ lọc này:

app.filter('unique', function () {
return function ( collection, keyname) {
var output = [],
    keys = []
    found = [];

if (!keyname) {

    angular.forEach(collection, function (row) {
        var is_found = false;
        angular.forEach(found, function (foundRow) {

            if (foundRow == row) {
                is_found = true;                            
            }
        });

        if (is_found) { return; }
        found.push(row);
        output.push(row);

    });
}
else {

    angular.forEach(collection, function (row) {
        var item = row[keyname];
        if (item === null || item === undefined) return;
        if (keys.indexOf(item) === -1) {
            keys.push(item);
            output.push(row);
        }
    });
}

return output;
};
});

Cập nhật đánh dấu của bạn:

<select ng-model="orderProp" >
   <option ng-repeat="place in places | unique" value="{{place.category}}">{{place.category}}</option>
</select>

Điều này có thể là quá mức cần thiết, nhưng nó làm việc cho tôi.

Array.prototype.contains = function (item, prop) {
var arr = this.valueOf();
if (prop == undefined || prop == null) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] == item) {
            return true;
        }
    }
}
else {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i][prop] == item) return true;
    }
}
return false;
}

Array.prototype.distinct = function (prop) {
   var arr = this.valueOf();
   var ret = [];
   for (var i = 0; i < arr.length; i++) {
       if (!ret.contains(arr[i][prop], prop)) {
           ret.push(arr[i]);
       }
   }
   arr = [];
   arr = ret;
   return arr;
}

Hàm riêng biệt phụ thuộc vào hàm chứa được xác định ở trên. Nó có thể được gọi là array.distinct(prop);nơi prop là tài sản bạn muốn khác biệt.

Vì vậy, bạn chỉ có thể nói $scope.places.distinct("category");

Tạo mảng của riêng bạn.

<select name="cmpPro" ng-model="test3.Product" ng-options="q for q in productArray track by q">
    <option value="" >Plans</option>
</select>

 productArray =[];
angular.forEach($scope.leadDetail, function(value,key){
    var index = $scope.productArray.indexOf(value.Product);
    if(index === -1)
    {
        $scope.productArray.push(value.Product);
    }
});