我不明白为什么 Angulajs 过滤器没有按预期工作？

Question

我有一个基于四个用户输入的 AngularJS 过滤器。两个输入，类别和作者，来自下拉列表。一种输入来自文本输入，另一种来自广播组。我使用一个按钮来清除用户输入。

当我在各自的输入中输入所需的值时，不显示过滤数据。当我单击按钮清除输入值时，会显示过滤后的数据。

由于我是 AngularJS 的新手，所以我不明白我在哪里做错了什么。

Filter.js

angular.module("customFilters", [])
.filter("unique", function() {
    return function(data, propertyName) {
        if (angular.isArray(data) && angular.isString(propertyName)) {
            var results = [];
            var keys = {};
            for (var i = 0; i < data.length; i++) {
                var val = data[i][propertyName];
                if (angular.isUndefined(keys[val])) {
                    keys[val] = true;
                    results.push(val);
                }
            }
            return results;
        } else {
            return data;
        }
    }
})

Controller.js

App
.controller('PadaListController', function($scope, $state, PagerService) {
    
    // Private Data
    var selectedCategory = null;
    var selectedAuthor = null;


    // Assigns user selected Category to private variable selectedCategory
    $scope.selectCategory = function(newCategory) {
        selectedCategory = newCategory;
    }
    
    // Filter padas by selected Category
    $scope.categoryFilterFn = function(pada) {
        return selectedCategory == null || 
            pada.category == selectedCategory;
    }

    // Assigns user selected Author to private variable selectedAuthor
    $scope.selectAuthor = function(newAuthor) {
        selectedAuthor = newAuthor;
    }

    // Filter padas by selected Author
    $scope.authorFilterFn = function(pada) {
        return selectedAuthor == null || 
            pada.author == selectedAuthor;
    }
});

list.html

<md-content>
<md-card md-theme="{{ appDefaults.showDarkTheme ? 'dark-blue' : 
appDefaults.theme || 'default' }}">
    <button type="button" ng- 
    click="catgry='';authr='';search='';direction=''">Clear 
    Filters</button>

    <md-card-header layout ng-click="showSearch=!showSearch">
        <md-card-avatar class="md-user-avatar">
            <md-icon md-svg-src="img/material/baseline-search-24px.svg"> 
            </md-icon>
        </md-card-avatar>
        <md-card-header-text>
            <div class="md-headline">Search</div>
            <div class="md-subhead">and Order</div>
        </md-card-header-text>
    </md-card-header>

    <!-- Card contents -->
    <div ng-show="showSearch">
        <md-card-content>
                 
            <label arial-label="category">Select Category</label>
            <md-select ng-model="catgry" ng- 
            change="selectCategory(catgry)">
                <md-option>None</md-option>
                <md-option value={{catgry}} 
                    ng-repeat="catgry in data.padas | orderBy:'category' | 
                    unique: 'category'">
                    {{catgry}}
                </md-option>
            </md-select>

            <label aria-label="author">Select Author</label>
            <md-select ng-model="authr" ng-change="selectAuthor(authr)">
                <md-option value={{authr}} 
                ng-repeat="authr in data.padas | orderBy:'author' | 
                unique: 'author'">
                    {{authr}}
                </md-option>
            </md-select>
            
            <md-input-container>
                <label aria-label="pada search">Search/Goto</label>
                <input type="text" ng-model="search" />   
            </md-input-container>

            <md-radio-group ng-model="direction">
                <md-radio-button value="" aria-label="आरोही क्रम"> 
                    Ascending</md-radio-button>    
                <md-radio-button value="reverse" aria-label="अवरोही 
                    क्रम">Descending</md-radio-button>
            </md-radio-group>
    
        </md-card-content>
    </div>
</md-card>

<md-card
    ng-repeat="pada in (filteredPadas = (data.padas | 
    filter:categoryFilterFn | filter:authorFilterFn | filter:search | 
    orderBy:direction))" ng-click="showPadaDetails=!showPadaDetails">
        <!-- Filtered Contents -->
</md-card>
</md-content>

当我在各个输入字段中输入值时，我想显示过滤后的数据，当我单击清除过滤器按钮时，应该显示整个数据。

Answer 1

我认为问题在于您在 ng- 部分之后的 "ng-click" 中有空格，例如 "ng-click"，ng-change也有同样的问题 删除空格并将其连接为一个单词，如果对您有帮助，请告诉我。

我注意到的另一件事

在ng-repeat="catgry in data.padas | orderBy:'category' | unique: 'category'"里面

您应该显示 data.padas 对象的内容，而不是

{{catgry}}

应该是

{{catgry.category}}

ng-repeat="authr in data.padas | orderBy:'author' | unique: 'author'" 也一样

而不是

{{authr}}

应该是

{{authr.author}}