ng-repeatBir JSON dosyası üzerinden basit bir şekilde çalıştırıyorum ve kategori adlarını almak istiyorum. Her biri bir kategoriye ait olan yaklaşık 100 nesne vardır - ancak yalnızca yaklaşık 6 kategori vardır.

Mevcut kodum şu:

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

Çıktı, çoğu kopya olan 100 farklı seçenektir. {{place.category}}Zaten var olup olmadığını kontrol etmek için Angular'ı nasıl kullanırım ve zaten varsa bir seçenek oluşturmam?

düzenleme: Javascript'imde $scope.places = JSON data, sadece açıklığa kavuşturmak için

Sen kullanabilirsiniz benzersiz (burada mevcut kaynak kodu: AngularUI Filtreyi AngularUI benzersiz filtre ) ve ng-seçeneklerinde doğrudan kullanmak (veya ng-tekrar).

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

Veya lodash kullanarak kendi filtrenizi yazabilirsiniz.

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

Angular.filter modülünde 'benzersiz' (takma adlar: uniq) filtre kullanabilirsiniz

kullanım: colection | uniq: 'property'
yuvalanmış özelliklere göre de filtreleyebilirsiniz: colection | uniq: 'property.nested_property'

Yapabileceğin şey, bunun gibi bir şey ..

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: Müşteri kimliğine göre filtreliyoruz, yani mükerrer müşterileri kaldırıyoruz

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

sonuç
Müşteri listesi:
foo 10
bar 20
baz 30

bu kod benim için çalışıyor.

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

ve sonra

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

Kategorileri listelemek istiyorsanız, görünümde niyetinizi açıkça belirtmeniz gerektiğini düşünüyorum.

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

kontrolörde:

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

İşte basit ve genel bir örnek.

Filtre:

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

İşaretleme:

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

Eşsiz üye için herhangi bir derinliğe izin vermek için @ thethakuri'nin cevabını genişletmeye karar verdim. İşte kod. Bu, sadece bu işlevsellik için tüm AngularUI modülünü dahil etmek istemeyenler içindir. Zaten AngularUI kullanıyorsanız, bu yanıtı göz ardı edin:

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

Misal

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

Nesneler değil, dizelerim vardı ve bu yaklaşımı kullandım:

ng-repeat="name in names | unique"

bu filtre ile:

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

  };
}

GÜNCELLEME

Set'in kullanılmasını tavsiye ediyordum ama üzgünüm bu ng-yinelemede veya Map'de çalışmıyor çünkü ng-yineleme yalnızca dizi ile çalışıyor. Bu yüzden bu cevabı görmezden gelin. her neyse, yinelenenleri filtrelemeniz gerekiyorsa, bir yol diğerinin de söylediği gibi angular filters, işte bunun için başlangıç ​​bölümüne bağlantı .

Eski cevap

Yo kullanabilirsiniz ECMAScript 2015 (ES6) standart Seti Veri yapısını Kümenize eklerken tekrarlanan değerleri filtrelemek bu şekilde yapılandırın yerine Array Veriler,. (Kümelerin tekrarlanan değerlere izin vermediğini unutmayın). Kullanımı gerçekten çok kolay:

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

İşte bunu yapmanın yalnızca şablonlu bir yolu (yine de sırayı korumuyor). Ayrıca, sonuç da sıralanacaktır ve bu çoğu durumda yararlıdır:

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

Yukarıdaki filtrelerden hiçbiri sorunumu çözmedi , bu yüzden filtreyi resmi github belgesinden kopyalamak zorunda kaldım . Ve sonra yukarıdaki cevaplarda açıklandığı gibi kullanın

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

dönüş işlevi (öğeler, 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;
  };

});

Görünüşe göre herkes kendi uniquefiltre versiyonunu ringe atıyor, ben de aynısını yapacağım. Eleştiri çok hoş karşılanır.

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

İç içe geçmiş anahtara göre benzersiz veriler almak istiyorsanız:

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

Şöyle diyelim:

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

Bu filtreyi ekleyin:

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

İşaretlemenizi güncelleyin:

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

Bu aşırı olabilir ama benim için işe yarıyor.

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

Farklı işlev, yukarıda tanımlanan içeren işlevine bağlıdır. array.distinct(prop);Burada prop, farklı olmasını istediğiniz özellik olarak adlandırılabilir .

Yani sadece söyleyebilirsin $scope.places.distinct("category");

Kendi dizinizi oluşturun.

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