Ng-Repeat: Filter By Uniqueness

问题

Though I have ui-boostrap installed, the browser shoots me an error Error: [$injector:unpr] Unknown provider: uniqueFilterProvider <- uniqueFilter

json objects

{ 
"_id" : ObjectId("55b81956fde835be46f22294"), 
"life" : true, 
"domain" : { "hidden" : true, "name" : "Eukarya" }, 
"kingdom" : { "hidden" : true, "name" : "Animalia" }, 
"phylum" : { "hidden" : true, "name" : "Chordata" }, 
"klass" : { "hidden" : true, "name" : "Mammalia" }, 
"order" : { "hidden" : true, "name" : "carnivoria" }, 
"family" : { "hidden" : true, "name" : "herpestidae" }, 
"genus" : { "hidden" : true, "name" : "galerelaa" }, 
"species" : { "hidden" : true, "name" : "Mongoose" }, 
"photo" : { "hidden" : true, "url" : "http://room909.com/wp-content/gallery/drawings-by-jared-flynn/snake-v-mongoose-web.jpg" }, 
"__v" : 0 
}

{ 
"_id" : ObjectId("55b81956fde835be46f22295"), 
"life" : true, 
"domain" : { "hidden" : true, "name" : "Eukarya" }, 
"kingdom" : { "hidden" : true, "name" : "Animalia" }, 
"klass" : {"name": "Bivalvia", "hidden": true},
"order" : { "hidden" : true, "name" : "Ostreoida" }, 
"family" : {"name": "Ostreidae", "hidden": true},
"genus" : { "hidden" : true, "name" : "" }, 
"species" : { "hidden" : true, "name" : "" }, 
"photo" : { "hidden" : true, "url" : "http://a-z-animals.com/media/animals/images/470x370/oyster5.jpg" }, 
"__v" : 0 
}

html

<section class="footer">
  <div id="explanation" class="container">
    <div ng-repeat="animal in animals | unique: 'animal.domain'" ng-hide="domain" class="panel panel-default">
      <p  class="panel-body">{{animal.domain.name}}</p>
    </div>
  </div>
</section>

I've also tried variations on the unique's value like domain.name and domain, but they all bring the same error.

回答1:

I found an answer. All we have to do is, instead, simply installed the wonderful, genius, un-replaceable a8m angular-filter library with bower/npm, added to my array of dependencies (@Joy), and used the syntax ng-repeat="animal in animals | unique: 'domain.name'" and everything works fine.

回答2:

Unique Filter example will help you using unique filter. I think version of angular-ui you are using may not have unique filter. try to change the version of ui-bootstrap.

As you see in example, filter accepts property of record item.

<tr ng-repeat="record in items | unique:attribute"> 
       <td>{{record.firstName}}</td>
       <td>{{record.lastName}}</td>
       <td>{{record.id}}</td>
       <td>{{record.gender}}</td>
</tr>

So, in your example it should be as following. See change for ng-hide and unique filter.

<section class="footer">
  <div id="explanation" class="container">
    <div ng-repeat="animal in zab | unique: 'domain'" 
                ng-hide="animal.domain" class="panel panel-default">
      <p  class="panel-body">{{animal.domain.name}}</p>
    </div>
  </div>
</section>

来源：https://stackoverflow.com/questions/31689360/ng-repeat-filter-by-uniqueness

标签

angularjs

angularjs-ng-repeat