Question

我正在使用此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>

Answer 1

我建议将代码拆分到基础，也许只是显示所有内容然后迁移到分页。我可以发现你的第一个问题是你在物种上应用了两个过滤器。

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

Answer 2

刚刚了解到Angular过滤器没有（至少还没有）我正在寻找的功能。所以我通过将复选框更改为单选按钮来解决此问题，并根据所选的无线电进行不同的后端API调用。

模板：

    <div class="row adopt-title-wrap">
    <div class="medium-5 large-5 column">
        <h4>Find Your Next Best Friend!</h4>
    </div>
    <div class="medium-1 large-1 column">
        <i class="fa fa-spinner fa-pulse fa-2x"></i>
    </div>
    <div class="medium-2 large-2 column">
        <input type="radio" ng-model="species" value="all">
        <label>Show All</label>
    </div>
    <div class="medium-2 large-2 column">
        <input type="radio" ng-model="species" value="cats">
        <label>Cats Only</label>
    </div>
    <div class="medium-2 large-2 column end">
        <input type="radio" ng-model="species" value="dogs">
        <label>Dogs Only</label>
    </div>
</div>

<div class="row">
    <!-- Start Single Animal Record -->
    <div class="single-record medium-6 large-6 end column" dir-paginate="animal in animals | 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 }} ({{animal.specie }})</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>

控制器：

    angular.module('animalShelterApp')
.controller('AdoptCtrl', function ($scope, SharedServices) {

    var spinner = angular.element('.fa-spinner'); // Holds spinner element.

    /*
    * Binds 3 radio buttons (all, cats, dogs).
    * Load 'all' records by default.
    */
    $scope.species = 'all';

    /*
    * When user selects a specie, display appropriate data.
    */
    $scope.$watch('species', function() {
        spinner.show();

        if ($scope.species === 'all') {
            /*
            * Get all available animals.
            */
            SharedServices.getAllAnimals().success(function(data) {
                spinner.hide();
                $scope.animals = data;
            });

        } else if ($scope.species === 'cats') {
            /*
            * Get all available Cats.
            */
            SharedServices.getAllCats().success(function(data) {
                spinner.hide();
                $scope.animals = data;
            });

        } else if ($scope.species === 'dogs') {
            /*
            * Get all available Dogs.
            */
            SharedServices.getAllDogs().success(function(data) {
                spinner.hide();
                $scope.animals = data;
            });
        }

    }); // end $scope.$watch('species').

}); // end AdoptCtrl.

带有Paginator的Angular Checkbox过滤器

2 个答案: