angular-ui - Angular UI, Unique not working

Question

So i'm trying to filter my ng-repeat directive by using angular unique module.. but i'm kinda lost, i followed the exact order with adding the scripts... In console i'm getting an error, 'No module: ui.utils'..

Here is my Plunker: http://plnkr.co/edit/cKJgtGyYeQdQCyARXG7j?p=preview

From this code:

<ul>
 <li>nokia</li>
 <li>nokia</li>
 <li>samsung</li>
</ul>

i should get with -unique- this code:

<ul>
 <li>nokia</li>
 <li>samsung</li>
</ul>

Some good people here helped me already by using jQuery filter, but i think this is much better way of doing this.. Any help is much appreciated..

Answer 1

您可以在 angular.filter 模块（https://github.com/a8m/angular-filter） 中使用 'unique'(aliases: uniq) 过滤器

用法：colection | uniq: 'property'
您可以按嵌套属性过滤：colection | uniq: 'property.nested_property'

所以你可以做这样的事情..

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：我们按客户 ID 过滤，即删除重复的客户

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

结果： 所有客户列表：
foo 10
bar 20
baz 30