AngularJS ng-repeat unique 无效

Question

我试图只打印名称的唯一值，但我做不到。

html代码：

<div ng-controller="MyCtrl">
    <div><input type="text" ng-model="nameFilter" placeholder="Search..." /></div>
    <p ng-repeat="contact in contacts | orderBy: 'customer.name'| unique:'customer.name'">{{ contact.customer.name }}</p>


</div>

JS代码：

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

function MyCtrl($scope) {
    $scope.nameFilter = '';
    $scope.contacts = [
        { 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 } },
        { id:5, customer: { name: 'tar', id: 30 } },
        { id:5, customer: { name: 'got', id: 30 } },
        { id:5, customer: { name: 'man', id: 30 } },
        { id:5, customer: { name: 'baz', id: 30 } },
    ];

}

jsfiddle 在这里：http://jsfiddle.net/nvarun123/0tgL7u6e/73/

如果我从 ng-repeat 中删除 unique，则此代码有效。

Answer 1

给你，我在 angular UI 指令中使用了 unique 过滤器，link 在底部。我对实现 deep finding using string 的指令做了一个小改动。详情在参考文献中。

这是过滤器的演示。

JSFiddle Demo

在 unique 过滤器中进行了更改。

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

如上所示，我正在实现 deepFind 函数。下面也提供了该功能。

function deepFind(obj, path) {
  var paths = path.split('.')
    , current = obj
    , i;

  for (i = 0; i < paths.length; ++i) {
    if (current[paths[i]] == undefined) {
      return undefined;
    } else {
      current = current[paths[i]];
    }
  }
  return current;
}

参考文献：

Angular-UI unique filter
Javascript get deep value by passing path

Answer 2

这是一个简单的自定义过滤器，应该可以满足您的需求：

app.filter("unique", function thisFilter() {
  return function(input){
    var seen = { objectNames: [] };
    return input.filter(function(obj){
      return !seen.objectNames.includes(obj.customer.name) 
        && seen.objectNames.push(obj.customer.name)
    })
  }
});

AngularJS ng-repeat unique 无效

AngularJS ng-repeat unique is NOT working

angularjs

angularjs-directive

angularjs-ng-repeat