Question

我有一个数组，我用它来使用ng-repeat填充表格。我在控制器中应用了一个过滤器，它根据某个变量columnFilter的值过滤数组。现在，如果我更改了该变量，我的表格视图就不会更新。即，一旦变量发生变化，过滤器就不会重新应用。

JS

＆＃13;

var myApp = angular.module('myApp',[]);


function MyCtrl($scope, $filter) {
    $scope.name = 'Superhero';
    $scope.col={name:""};
    $scope.TableData = [{
      name: "2017/03/01-14",
      specification: "1wk",
    },
    {
      name: "2017/03/01-17",
      specification: "Set-04",
    },
    {
      name: "2017/03/04-11",
      specification: "1wk",
    },
    {
      name: "2017/04/01-14",
      specification: "1wk",
    },
    {
      name: "2017/03/10-10",
      specification: "Set-04",
    },
    {
      name: "2017/03/10-10",
      specification: "Set-04",
    }
    $scope.TableDataFiltered = $filter('filter')($scope.TableData, $scope.col);
}

＆＃13;

＆＃13;
HTML

＆＃13;

<div ng-controller="MyCtrl">
<input type="text" ng-model="col.name">
<table>
<thead>
  <tr>
    <th>name</th>
    <th>spec</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="item in TableDataFiltered">
    <td>{{item.name}}</td>
    <td>{{item.specification}}</td>
  </tr>
</tbody>
</table>
</div>

＆＃13;

对于告诉如何使用| filter: expression语法的所有答案，我知道这一点，但实际的应用程序还有其他过滤器等，这需要在控制器本身进行过滤。（我提供了一个最小的例子，它没有说清楚这一点，对我而言。）

Answer 1

当您使用html angular中的过滤器时，将观察它使用的变量并在表达式发生变化时重新计算表达式。如果您想从代码中调用过滤器，则需要执行相同的操作：

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


function MyCtrl($scope, filterFilter) {
    $scope.name = 'Superhero';
    $scope.col={name:""};
    $scope.TableData = [...];

    $scope.$watch('col', function(newCol) {
        $scope.TableDataFiltered = filterFilter($scope.TableData, newCol);
    });
}

另请注意，您可以直接注入要使用的过滤器，每次都不必在过滤器提供程序中查找。来自文档：

为此，请注入名称为＆lt; filterName＆gt; Filter的依赖项你的控制器/服务/指令。例如。一个名为number的过滤器使用依赖numberFilter注入。注入的论点是一个函数，它将值格式化为第一个参数，并且从第二个参数开始过滤参数。

请注意，如果您要使用控制器中的过滤器，那么您可能不需要在$scope中公开未过滤的数据，在这种情况下，您可以将其设为普通变量，或将表数据从控制器移到服务中。这样你可以避免使用数据混乱控制器（应该控制事物）。

Answer 2

无需在控制器中定义$scope.TableDataFiltered，只需在模板中使用过滤器：

<tr ng-repeat="item in TableDataFiltered | filter : col.name">

Answer 3

您不需要为此编写特定功能，只需使用内联synthax：

<tbody>
  <tr ng-repeat="item in TableDataFiltered | filter: col.name">
    <td>{{item.name}}</td>
    <td>{{item.specification}}</td>
  </tr>
</tbody>

在控制器

3 个答案: