Question

我正在编写一个角度应用程序，并希望使用ng-repeat在表格中显示客户结果。我可以将ng-filter连接到ng-model并搜索结果，但我想知道如何添加复选框来修改我的结果。

例如，假设我有这些数据：

[{
    "name": "Bob Smith",
    "percent": 100,
    "notes": "100 percent complete"
 },
 {
    "name": "Sally Brown",
    "percent": 75,
    "notes": "Not yet at 100 percent"
 }
    ....
 ]

我当前的应用程序允许用户在此搜索任何内容，例如带有过滤器的常规ng-repeat：

<input ng-model="query.$">
<table>
    <tr>
        <th>Name</th>
        <th>Percent</th>
        <th>Notes</th>
    </tr>
    <tr ng-repeat="customer in customers | filter:query">
        <td>{{ customer.name }}</td>
        <td>{{ customer.percent }}</td>
        <td>{{ customer.notes }}</td>
    </tr>
</table>
<input ng-model="query.completed" type="checkbox"> Show Completed Jobs

但我希望旁边的复选框上写着＆＃34;向客户展示100％＆＃34;。我尝试过编写过滤函数：

.filter('show100percent', function() {
    return function(items, showcompleted) {
        var jobs = []
        items.forEach(function(item) {
            if (showcompleted == false) {
                if (item.percent < 100) {
                    jobs.push(item)
                }
            } else {
                jobs.push(item)
            }
        })
        return jobs
    }
})

但这样做会阻止我的应用程序接受来自文本框的输入

<tr ng-repeat="customer in customers | show100percent:query.completed">

在常规过滤器顶部添加我的过滤器只显示一组空白结果：

<tr ng-repeat="customer in customers | show100percent:query.completed | filter:query">

我做错了吗？如何通过输入框搜索我的数据，但使用复选框，选择，第二个输入框或任何其他类型的表单元素修改结果？

Answer 1

您应该使用不同的$scope变量来分配复选框和自定义过滤器，现在showcompleted将作为未定义发送。所以过滤不会发生

  $scope.showcompleted = false;

  <tr ng-repeat="customer in customers | show100percent:showcompleted | filter:query">

也在复选框中，

我已经修改了你的过滤器

app.filter('show100percent', function() {
  return function(items, showcompleted) {
    var jobs = []
    items.forEach(function(item) {
      if (showcompleted == true) {
        if (item.percent == 100) {
          jobs.push(item)
        }

      } else {
        jobs.push(item)
      }
    })
    return jobs
  }
})

<强> DEMO

Answer 2

将百分比属性添加到查询对象以匹配您的模型，因此当复选框处于启用状态时，它应如下所示：

{
  $: FREE_TEXT,
  percent: 100
}

使用复选框使用ng-true-value="100"和空ng-false-value指令来实现它：

<input ng-model="query.$">
<table>
    <tr>
        <th>Name</th>
        <th>Percent</th>
        <th>Notes</th>
    </tr>
    <tr ng-repeat="customer in customers | filter:query">
        <td>{{ customer.name }}</td>
        <td>{{ customer.percent }}</td>
        <td>{{ customer.notes }}</td>
    </tr>
</table>
<input ng-model="query.percent" type="checkbox" ng-true-value="100" ng-false-value> Show Completed Jobs

plunker：http://plnkr.co/edit/uU6ibIDaS3OcYnZ3TqkR?p=preview

角度ng重复滤波器有条件？

2 个答案: