我正在使用此AngularJS分页器https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
我还使用this video中的示例将复选框过滤器添加到ng-repeat中。我想根据每个specie对象(animal.specie)的animal属性是cat还是dog进行过滤。我开始都将其设置为true,但是当我这样做时,ng-repeat不会填充。当我选中truefalse的框时,没有任何反应。

控制器中唯一的东西是$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

09-17 16:40
查看更多