AngularJs删除ng-repeat中的重复元素

Question

我有一个存储的词典 field_detail

<li ng-repeat = "field in field_detail">{{field.displayName}}</li>

现在我不想包括重复displayName的field_detail,什么filter应该怎么用？

Answer 1

只需创建一个过滤器,可以通过键获取唯一值.这样的事情应该做(我根本没有测试过,所以我会把这个事情留给你,这只是为了给你一个想法):

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

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

      return output;
   };
});

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

注意:Array.indexOf()在IE8中不起作用,所以如果你支持IE8,你需要在indexOf()中存根,或者你需要使用稍微不同的方法.

其他想法:如果您已经引用了这些库,那么创建一个利用lowdash或underscore中的唯一函数的过滤器可能更好.

Answer 2

我根据Ben Leash提供的答案编写了一个JSFiddle:

http://jsfiddle.net/ThunderHemlock/bvsvzrr5/1/

谢谢,本.其他答案需要使用AngularJS UI或其他此类附加框架.

var app = angular.module('app', []);

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

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

app.controller('MyCtrl', function ($scope) {

$scope.items = [
      {
        id : 1,
        column : "col1",
        comment : "col1-label1",
        text1 : "col1-label1-text1",
        checked: false,

      },
      {
        id : 2,
        column : "col1",
        comment : "col1-label2",
        text1 : "col1-label2-text1",
        checked: false,

      },
      {
        id : 3,
        column : "col2",
        comment : "col2-label1",
        text1 : "col2-label1-text1",
        checked: false,

      },
      {
        id : 4,
        column : "col2",
        comment : "col2-label2",
        text1 : "col2-label2-text1",
        checked: false,

      },
      {
        id : 5,
        column : "col3",
        comment : "col3-label1",
        text1 : "col3-label1-text1",
        checked: false,

      },
      {
        id : 6,
        column : "col3",
        comment : "col3-label2",
        text1 : "col3-label2-text1",
        checked: false,

      },
      {
        id : 7,
        column : "col4",
        comment : "col4-label1",
        text1 : "col4-label1-text1",
        checked: false,

      },
      {
        id : 8,
        column : "col4",
        comment : "col4-label2",
        text1 : "col4-label2-text1",
        checked: false,

      }
      ];
    });



<div ng-app="app">
        <div ng-controller="MyCtrl as item">
            <ul>
                <li ng-repeat="item in items | unique: 'column'">
                    {{ item.column }}
                </li>
            </ul>
        </div>
    </div>