0

我才刚刚开始探索 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>
4

1 回答 1

0

这是使用一个控制器处理所有内容并将数据存储在服务中的示例。

<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 演示

于 2013-04-05T22:20:25.797 回答