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

我的控制器中有以下过滤功能，它可以工作。问题是，我有几个按钮调用相同的函数，并按不同的性能进行过滤。因此，如果我单击第一个按钮，那就太好了。过滤器工作，但只要我点击第二个按钮，它就不工作了。现在我知道了原因（我想），因为第一个按钮点击过滤了视图，第二个按钮的性能不再存在于视图中。我想我要么不需要直接过滤视图，要么重新设置视图，我不知道怎么做

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>

点击一个
点击两下
{{perf.perf_desc}

HTML

你好

您的过滤器用过滤后的阵列替换阵列：

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">

this.filteredPerfs=性能；
this.myFunc=函数（perfNo）{
this.filteredPerfs=this.perfs.filter（函数（el）{
返回（el.perf_no==perfNo）；
});
}

请创建一个fiddle/plnkr来重现您的问题。太好了！谢谢。这正是我想要的。

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">