AngularJS-基於過濾器的開關數據集

Question

我剛開始探索AngularJS。我最近看了一篇教程，講解如何設置一個基本的過濾器。我現在試圖擴展這個概念。我覺得我接近這個方式效率很低。

這裏使用的方法要求爲每個新數據集建立一個新的Ctrl。如果您有5個不同的數據集需要設置過濾器，則需要5個不同的控制器。當我看看下面的示例時，我看到很多重複的代碼，這使得我可以以不同的方式做到這一點。

這裏有一個工作的jsfiddle：http://jsfiddle.net/smithd/eUZ7q/1/

<div ng-app="searchApp"> 
    <div ng-controller="FilterCtrl" class="filter"> 
     <h1>Search Demo</h1> 
     <hr/> 
     <div ng-switch on="selection"> 
      <!-- <div ng-switch-default>default</div> --> 
      <div ng-switch-when="avengers"> 
       <div ng-controller="AvengersCtrl"> 
        <input type="text" ng-model="search"> 
        <table ng-show="(filteredData = (avengers.cast | filter:search)) && search && search.length >= 1"> 
         <tr ng-repeat="actor in avengers.cast | filter:search"> 
          <td>{{actor.name}}</td> 
          <td>{{actor.character}}</td> 
         </tr> 
        </table> 
       </div> 
      </div> 
      <div ng-switch-when="expendables"> 
       <div ng-controller="ExpendablesCtrl"> 
        <input type="text" ng-model="search"> 
        <table ng-show="(filteredData = (expendables.cast | filter:search)) && search && search.length >= 1"> 
         <tr ng-repeat="actor in expendables.cast | filter:search"> 
          <td>{{actor.name}}</td> 
          <td>{{actor.character}}</td> 
         </tr> 
        </table> 
       </div> 
      </div> 
      <select ng-model="selection" ng-options="item for item in items" class="filter"></select> 
     </div> 
    </div> 
</div> 

Answer 1

下面是使用一切一個控制器和存儲在服務中的數據的例子。

<div ng-controller="FilterCtrl"> 
     <h1>Search Demo</h1> 
     <hr/> 
     <select ng-model="selection" ng-options="item for item in items" class="filter"></select> <hr/> 
     <div> 
      <input type="text" ng-model="search"> 
      <table ng-show="(filteredData = (cast | filter:search)) && search && search.length >= 1"> 
       <tr ng-repeat="actor in cast | filter:search"> 
        <td>{{actor.name}}</td> 
        <td>{{actor.character}}</td> 
       </tr> 
      </table> 
     </div> 
    </div> 

var app = angular.module('plunker', []); 
app.factory('DataService', function() { 
    return { avengers: [...],expendables: [...]} 
}); 

app.controller('FilterCtrl', function($scope,DataService){ 
    $scope.items = ['avengers', 'expendables']; 
    $scope.selection = $scope.items[0]; 
    /* change data when select changes*/ 
    $scope.$watch('selection',function(){ 
    $scope.cast=DataService[$scope.selection]; 
    }) 

}); 

Plunker demo