Question

我的控制器中有以下过滤功能，它可以正常工作。问题是我有几个按钮调用相同的功能，并由不同的perf_no过滤。所以，如果我点击第一个按钮，那很好。过滤器可以工作，但是当我点击第二个按钮时，它就没有了。现在我知道为什么（我认为），那是因为第一个按钮点击过滤了视图，第二个按钮的perf_no在视图中不再存在。我想我要么不需要直接过滤视图，要么重置我不知道该怎么做的视图。

this.myFunc = function (perfNo) {
                var myFilter = this.perfs.filter(function (el) { return (el.perf_no === perfNo); });
                console.log(myFilter);
                this.perfs = myFilter;
                return myFilter;

控制器

var myApp = angular.module('perfList', ['ngMaterial', 'ngMessages']);

(function (app) {
    'use strict';

    app.component('perfList', {
        templateUrl: 'perf-list.templateV3.html',
        //filter: function monthFilter() {
        //    alert("I am a Filter");
        //},



        controller: function PerfListController() {

            this.perfs = [
      { "perf_no": "1555", "perf_desc": "Test1"},
      { "perf_no": "1599", "perf_desc": "Test2"},
      { "perf_no": "1600", "perf_desc": "Test3" }
            ];


            this.myFunc = function (perfNo) {
                var myFilter = this.perfs.filter(function (el) { return (el.perf_no === perfNo); });
                console.log(myFilter);
                this.perfs = myFilter;
                return myFilter;



            }

        }
    });
})(myApp);

html模板

<div class="container-fluid" >
    <nav class="navbar navbar-default">
        <span class="cs-span-nav" ng-click="$ctrl.myFunc('1555')">Click one</span>
        <span class="cs-span-nav" ng-click="$ctrl.myFunc('1599')">Click two</span>
    </nav>


        <div ng-repeat="perf in $ctrl.perfs">
            <div class="row cs-perfRow">
                <div class="col-sm-10 cs-leftcol">
                    <div class="col-sm-10 col-xs-12">
                        <div class="row">
                            <div class="cs-perfDesc">{{perf.perf_desc}</div>   
                    </div>
                </div>

            </div>
        </div>
</div>

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <script src="Scripts/angular.min.js"></script>

    <script src="Scripts/angular-material/angular-material.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css">

    <script src="Scripts/angular-animate.min.js"></script>
    <script src="Scripts/angular-aria.min.js"></script>
    <script src="Scripts/angular-messages.min.js"></script>



    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="perf-list.componentV3.js"></script>
    <link href="perfList.css" rel="stylesheet" />

</head>
<body>
    hello2
    <div ng-cloak="" class="navBardemoBasicUsage" ng-app="perfList">
                <perf-list></perf-list>

    </div>


</body>
</html>

Answer 1

您的过滤器会使用已过滤的数组替换您的数组：

this.perfs = myFilter;

因此，在单击第一个按钮后，该数组只包含一个元素，而其他元素则丢失。单击第二个按钮后，它不再包含任何内容。

使用真实角度滤波器（即ng-repeat="perfs | filter:byPerfNo"），或将滤波后的数组存储在组件的不同字段中，并迭代该不同的变量：

this.filteredPerfs = perfs;

this.myFunc = function(perfNo) {
    this.filteredPerfs = this.perfs.filter(function (el) { 
        return (el.perf_no === perfNo); 
    });
}

<div ng-repeat="perf in $ctrl.filteredPerfs">

AngularJS自定义过滤器和重置视图

1 个答案: