控制器中ng-repeat的自定義過濾器

我使用ng-repeat創建了一個顯示li中的數據的控制器。控制器中ng-repeat的自定義過濾器

該數據有一個名爲filter的變量，用於對數據進行分類。現在我想根據這個變量過濾li，並想通過使用按鈕來完成。

但我不知道如何將過濾器連接到控制器中的數據。創建plunkr它：plunkr

來源

2017-05-14 Hamid Yaftian

世界上沒有NG重複你plunkr好友。這是AngularJS文件閱讀器示例 – Bowofola

@Bowofola嗨，我編輯鏈接。 –

我的答案是否有效？ – Bowofola

有一個內置的過濾器命名爲「過濾器」，它完全適用於這個
更新filter爲對象currentFilter，並拖欠currentFilter.filter爲「應用程序」，這告訴過濾器要過濾的對象的屬性。
添加的按鈕和他們綁在功能上，設置currentFilter.filter他們點擊
更新NG-重複使用「currentFilter」，所以它這個詞完全匹配設定嚴格爲true時的範圍。默認情況下，strict是假的，像謂詞一樣工作。

角文檔：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的自定義過濾器

回答

相關問題