AngularJS自定義過濾器和重置視圖

我在我的控制器中有以下過濾功能，它的工作原理。問題是我有幾個按鈕調用相同的函數並通過不同的perf_no進行過濾。所以，如果我點擊第一個按鈕，很好。過濾器工作，但只要我點擊第二個按鈕，它不會。現在我知道爲什麼（我認爲），那是因爲第一個按鈕單擊過濾視圖，第二個按鈕的perf_no不再存在於視圖中。我想我不需要直接過濾視圖或重置我不知道該怎麼做的視圖。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>

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>

來源

2017-03-05 Marty

請建立小提琴/ plnkr重現你的問題。 – lin

您的篩選與過濾陣列替換您的數組：

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

來源

2017-03-05 17:22:24

美麗！謝謝。這正是我正在尋找的。 – Marty

AngularJS自定義過濾器和重置視圖

回答

相關問題