AngularJSカスタムフィルタとリセットビュー

私のコントローラには次のフィルタ機能があり、動作します。問題は、同じ機能を呼び出し、異なるperf_noでフィルタリングするいくつかのボタンがあることです。だから私が最初のボタンをクリックすると、素晴らしい。フィルターは機能しますが、2番目のボタンをクリックするとすぐには機能しません。今私は理由を知っています。これは、最初のボタンがビューをフィルタリングしてから2番目のボタンの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>

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

あなたのフィルターは、フィルターの配列を使用して配列を置き換えるHTML：

this.perfs = myFilter;

最初のボタンをクリックすると、配列には1つの要素しか含まれず、残りの要素は失われます。 2番目のボタンをクリックすると、もう何も表示されません。

本当の角度フィルタ（すなわち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カスタムフィルタとリセットビュー

答えて

関連する問題