Ng-Repeat: Filter By Uniqueness

时间:2015-07-29 00:31:17

标签: angularjs angularjs-ng-repeat

Though I have sound.duration = 1.0 installed, the browser shoots me an error ui-boostrap

json objects

Error: [$injector:unpr] Unknown provider: uniqueFilterProvider <- uniqueFilter

html

{ 
"_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 
}

I've also tried variations on the unique's value like <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> and domain.name, but they all bring the same error.

2 个答案:

答案 0 :(得分:3)

我找到了答案。我们所要做的就是简单地安装精美的,天才的,不可替换的a8m角度过滤器库和bower / npm,添加到我的依赖项数组中(@Joy) ),并使用语法ng-repeat="animal in animals | unique: 'domain.name'",一切正常。

答案 1 :(得分:2)

Unique Filter example将帮助您使用唯一过滤器。我认为你使用的angular-ui版本可能没有独特的过滤器。尝试更改ui-bootstrap的版本。

如您在示例中所示,过滤器接受记录项的属性。

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

因此,在您的示例中,它应如下所示。请参阅更改ng-hide和唯一过滤器。

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