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

Problem already found, unique: name, should be unique: 'name'... Stupid mistake :/ — Gojko Ubiparip
– Gojko Ubiparip, Commented Jul 17, 2013 at 11:37
Your demo also appears to be on an outdated version of AngularUI. You may want to close the question lol. — ProLoser
– ProLoser, Commented Jul 17, 2013 at 20:07
I'll leave it be, just for maybe another people with the same problem, AngularUI structure can be really tricky for newbies like me :) — Gojko Ubiparip
– Gojko Ubiparip, Commented Jul 17, 2013 at 21:09
Please provide an answer below and accept it or delete your question. — isherwood
– isherwood, Commented Jan 5, 2015 at 19:04

a8m · Accepted Answer · 2014-07-17 12:23:55Z

2

You can use 'unique'(aliases: uniq) filter in angular.filter module (https://github.com/a8m/angular-filter)

usage: colection | uniq: 'property'
you can filter by nested properties to : colection | uniq: 'property.nested_property'

So you can do something like that..

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: We filters by customer id, i.e remove duplicate customers

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

result: All customers list:
foo 10
bar 20
baz 30

edited Jul 17, 2014 at 12:23

answered Jul 17, 2014 at 12:17

a8m

9,4844 gold badges39 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular UI, Unique not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related