我正在使用此AngularJS分页器https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination。
我还使用this video中的示例将复选框过滤器添加到ng-repeat中。我想根据每个specie
对象(animal.specie)的animal
属性是cat
还是dog
进行过滤。我开始都将其设置为true,但是当我这样做时,ng-repeat不会填充。当我选中true
或false
的框时,没有任何反应。
控制器中唯一的东西是$scope.species = {dogs: true, cats: true};
我的实现有什么问题?任何帮助都感激不尽。
谢谢 :)
<div class="row adopt-title-wrap">
<div class="medium-6 large-6 column">
<h3>Find Your Next Best Friend</h3>
</div>
<div class="medium-2 large-2 end column">
<input type="checkbox" ng-model="species.cats">
<label>Cats Only</label>
</div>
<div class="medium-2 large-2 end column">
<input type="checkbox" ng-model="species.dogs">
<label>Dogs Only</label>
</div>
</div><br>
<i class="fa fa-spinner fa-pulse fa-3x"></i>
<div class="row">
<!-- Start Single Animal Record -->
<div class="medium-6 large-6 end column" dir-paginate="animal in animals
| filter: {specie: 'Dog'} : species.dogs
| filter: {specie: 'Cat'} : species.cats
| itemsPerPage: 6">
<div class="panel">
<img class="pet-img" ng-src="{{ animal.profile_photo }}" alt="pet for adoption">
<ul class="pet-details">
<li class="pet-field-title">Name</li>
<li class="pet-field-value">{{ animal.name }}</li>
<li class="pet-field-title">Age</li>
<li class="pet-field-value">{{ animal.dob }}</li>
<li class="pet-field-title">Breed</li>
<li class="pet-field-value">{{ animal.breed }}</li>
<li class="pet-field-title">Code</li>
<li class="pet-field-value">{{ animal.shelter_code }}</li>
</ul>
<p class="pet-description">{{ animal.description }}</p>
</div>
</div> <!-- End Single Animal Record -->
</div>
<dir-pagination-controls></dir-pagination-controls>
最佳答案
我建议将代码简化为基本代码,也许只是显示所有内容,然后迁移到分页。我可以发现您的第一个问题是,您在实物上应用了两个过滤器。
dir-paginate="animal in animals | filter: {specie: 'dog'} | filter: {specie: 'cat'}"
基本上是说过滤掉既是狗又是猫的动物。第一个过滤器将返回仅包含狗的数组,然后第二个过滤器将在仅查找猫的情况下运行,这是没有的,因为显然您不能同时成为狗和猫:)
Original Array: [{name: 'bob', specie: 'cat'}, {name: 'jeff', specie: 'dog'}] | filter dogs | filter cats
After First Filter (only dogs): [{name: 'jeff', specie: 'dog'}] | filter cats
After Second Filter (only animals that are both dogs and cats): []
尝试定义自己的角度滤镜以简化您的工作:
.filter('isCatOrDog', function() {
return function(inputAnimals) {
return inputAnimals.filter(function(animal) {
return animal.value === 'cat' || animal.value === 'dog';
});
}
});
您这样调用过滤器:
dir-paginate="animal in animals | isCatOrDog"
Basic Plunkr