Angular中如何通过外部复选框按25Code字段过滤数据

很简单，咱们一步步来搞定这个需求：

1. 给复选框绑定控制变量 #

先给你的复选框加上ng-model，绑定一个用来标记是否开启过滤的变量，比如showOnly25CodeOne：

<input type="checkbox" ng-model="showOnly25CodeOne">
<label>仅显示25Code为'1'的数据</label>

2. 给ng-repeat添加过滤逻辑 #

这里有两种常用实现方式，按需选择就行：

方式一：模板内直接用表达式过滤（快速简洁） #

这种方式不用额外写JS函数，直接在模板里完成过滤逻辑：

<ul>
  <li class="active" ng-repeat="row in instList | filter: (showOnly25CodeOne ? {25Code: '1'} : '')">
    <div ng-bind="row.date"></div>
    <!-- 你还可以在这里添加其他需要展示的字段，比如row.25Code、row.state等 -->
  </li>
</ul>

原理很直观：当复选框勾选时，showOnly25CodeOne为true，过滤器就只匹配25Code等于'1'的项；未勾选时，过滤器是空对象，会展示所有数据。

方式二：Controller内定义过滤函数（更灵活） #

如果以后需要扩展更复杂的过滤规则，推荐这种方式，可维护性更高。

先在你的Controller里添加过滤函数：

// 假设你的Controller结构如下
app.controller('YourController', function($scope) {
  $scope.instList = [
    {date:'06-11-2015', 25Code : '0', state: 'true', id : 21},
    {date:'15-11-2015', 25Code : '1', state: 'true', id : 22},
    // ... 其他数组项
  ];

  // 定义自定义过滤函数
  $scope.filterBy25Code = function(row) {
    // 复选框未勾选时，返回所有数据
    if (!$scope.showOnly25CodeOne) {
      return true;
    }
    // 复选框勾选时，仅返回25Code为'1'的项
    return row.25Code === '1';
  };
});

然后在模板里的ng-repeat调用这个过滤函数：

<ul>
  <li class="active" ng-repeat="row in instList | filter: filterBy25Code">
    <div ng-bind="row.date"></div>
  </li>
</ul>

⚠️ 小提醒：你原来的模板里重复写了两次ng-repeat，这会导致数据被重复渲染，记得删掉其中一个哦！

内容的提问来源于stack exchange，提问作者Vitali