0

ngRepeat別のコントローラーからフィルターを適用するにはどうすればよいですか?

コントローラーからFiltersどうすればいいですかapplyFilter()：

<div ng-controller="Filters">
    <span ng-click="applyFilter()"></span>
</div>

...コントローラitems内へResults

<div ng-controller="Results">
    <div ng-repeat="item in items">
        {{item.thing}}
    </div>
</div>
4

1 に答える 1

1

親コントローラーまたはサービスのいずれかを使用できます。以下の最初の例では、親コントローラーを使用して項目とフィルター値を定義し、それを 2 つの子コントローラーと共有します。2 番目の例は、両方のコントローラーに挿入され、親コントローラーを必要としないサービスの使用を示しています。

親コントローラーの例: 両方に対して 1 つの親コントローラーを用意し、そのコントローラーでデータとフィルター値を定義します。これにより、各子コントローラーがフィルターを簡単に処理および操作できるようになります。

デモ: http://plnkr.co/edit/yrtsX5SQsRiNSho6o9x8?p=preview

HTML:

<body ng-controller="MainCtrl">
  Hello {{name}}!

  <div ng-controller="Filters">
    <span ng-click="applyFilter()">Apply Filter</span>
  </div>

  <div ng-controller="Results">
    <div ng-repeat="item in items |  filter:filterFunc ">
    {{item}}
    </div>
  </div>

</body>

コントローラー:

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.items = [1,2,3,4,5,6,7];
  $scope.filterVal = 0;

});

app.controller('Filters', function($scope) {
    $scope.applyFilter = function() {
           $scope.$parent.filterVal = 5;  
           $scope.$apply();
    }
});

app.controller('Results', function($scope) {
 $scope.filterFunc= function(item) {
    console.log(item);
     if (item>$scope.filterVal)
      return item;
    }

});

サービスの例。 フィルター値とアイテムを含むサービスを使用した更新された例を次に示します。 http://plnkr.co/edit/wZFKBMRv0SeEsXNqARe2?p=preview

app.controller('Filters', function($scope, Utils) {
    $scope.applyFilter = function() {
          Utils.setFilter(4);
    }
});



app.controller('Results', function($scope, Utils) {
  $scope.items = Utils.getItems();
 $scope.filterFunc= function(item) {
    console.log(item);
     if (item>Utils.getFilter())
      return item;
    }

});

angular.module('ServicesUtils', []).
   factory('Utils', [ function () {

      var items = [1,2,3,4,5,6,7];
      var filter = 0;

      var service = {
        getFilter:function() {
          return filter;
        },
        getItems:function() {
         return items;
        },
        setFilter:function(n) {
          filter = n;
        }
      };

     return service;

    }]);
于 2013-05-17T20:00:06.693 に答える