コントローラのng-repeatのカスタムフィルタ

liのデータを表示するコントローラを作成します（ng-repeatを使用）。コントローラのng-repeatのカスタムフィルタ

データにはfilterという変数があり、データの分類に使用されます。今私はこの変数に基づいてliをフィルタリングし、ボタンを使ってそれをしたいと思います。

しかし、コントローラーのデータにフィルターを接続する方法がわかりません。私はそれのためにplunkrを作成：plunkr

出典

2017-05-14 Hamid Yaftian

あなたplunkrの相棒にはNGリピートをtheresの。これはAngularJSファイルリーダーの例です。 – Bowofola

@Bowofolaこんにちは、私はリンクを編集します。 –

私の答えは機能しましたか？ – Bowofola

が「フィルタ」という名前で、内蔵フィルタがあり、この
がオブジェクトcurrentFilterするfilterを更新し、そしてその「アプリ」にcurrentFilter.filterをデフォルトにするために、それは完璧に動作しますフィルタリングするオブジェクトのプロパティをフィルタに通知します。
ボタンを追加し、彼らが「currentFilter」を使用し、それが正確に単語と一致するようにtrueに厳密に設定するNGリピート更新
をクリックされたときcurrentFilter.filterを設定スコープの機能にそれらを結びました。デフォルトではstrictはfalseで、述語のように機能します。

角度のドキュメント：https://docs.angularjs.org/api/ng/filter/filter#example

var app = angular.module('plunker', []); 
 

 
app 
 
    .controller('isotopeCtrl', isotopeFunction); 
 

 
function isotopeFunction($scope) { 
 
    $scope.names = ['website-1', 'website-2', 'app-1', 'psd-1', 'psd-2', 'psd-3']; 
 
    $scope.currentFilter = { 
 
     filter: 'app' 
 
    }; 
 
    $scope.data = [{ 
 
      name: 'website-1', 
 
      filter: 'website' 
 
     }, 
 
     { 
 
      name: 'website-2', 
 
      filter: 'website' 
 
     }, 
 
     { 
 
      name: 'app-1', 
 
      filter: 'app' 
 
     } 
 
    ]; 
 
    $scope.setFilter = function(filter) { 
 
     $scope.currentFilter.filter = filter; 
 
    }; 
 
    console.log($scope.names); 
 
}

<!DOCTYPE html> 
 
<html ng-app="plunker"> 
 

 
    <head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <script>document.write('<base href="' + document.location + '" />');</script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script> 
 
    <script src="app.js"></script> 
 
    </head> 
 

 
    <body ng-controller="isotopeCtrl"> 
 
    <h2>Simple Data</h2> 
 
    <ul> 
 
     <li ng-repeat="item in data"> 
 
      <div>{{ item.name }}</div> 
 
     </li> 
 
    </ul> 
 
    <h2>Using Filter</h2> 
 
    
 
    <p>Here I used a dynamic filter - {{ currentFilter.filter }})</p> 
 
    <ul> 
 
     <li ng-repeat="item in data | filter:currentFilter:true"> 
 
      <div>{{ item.name }}</div> 
 
     </li> 
 
    </ul> 
 
    Filters 
 
    <button ng-click="setFilter('app')">app</button> 
 
    <button ng-click="setFilter('website')">website</button> 
 
    </body> 
 

 
</html>

出典

2017-05-14 21:18:56 Bowofola

コントローラのng-repeatのカスタムフィルタ

答えて

関連する問題