angularjs仅在选中复选框时应用自定义过滤器答案

【问题标题】：angularjs apply custom filter only when checkbox is checkedangularjs仅在选中复选框时应用自定义过滤器
【发布时间】：2019-05-07 19:21:31
【问题描述】：

这是我的控制器：

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];

  $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
});

这是我的观点：

<label class="switch">
  <input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">111
</label>

<div class="row" ng-controller="listdata">
    <div ng-repeat="user in users|filter:queue111">
       <p> {{user.name}} {{user.phone}}</p>
    </div>
</div>

当我启动应用程序时，会显示用户数据数组中的所有四个用户。当我单击过滤器复选框时，它会显示具有编号为 111 的队列的用户。但它也显示用户 pravin，因为它包含一个包含 111 的电话号码 7411173737。我希望此过滤器仅显示其队列编号的记录与 111 匹配，而不与此处的电话号码等任何其他字段匹配。所以过滤器应该只显示队列号为 111 的记录。

到目前为止我做了什么：

我想出了一个自定义函数$scope.filter111，如上面的代码所示，它只返回队列号为 111 的用户。我想在选中复选框时将此函数用作过滤器。如果我直接执行 ng-repeat="user in users|filter:filter111" 它仅在应用程序启动时显示队列号为 111 的记录（即仅 3 条记录）（应用程序启动时应显示所有四条记录）。因此，我希望仅在选中复选框并将其用作过滤器时才触发此功能。我想到了这样的事情：

<input ng-true-value="'filter111'" ng-false-value='' type="checkbox" ng-model="queue111">111

但它不是这样工作的。我如何做到这一点？

【问题讨论】：

ng-repeat="user in users|filter:{name:queue111"}
这会执行filter111函数吗？
不要使用自定义过滤器，我建议使用完全匹配，ng-repeat="user in users|filter:{name:queue111"}:true
不适合我。因为我只想显示队列号为 111 的对象
jsfiddle.net/sachinkk/kw8rysc5/4

标签： javascript angularjs html angularjs-filter

【解决方案1】：

我通过在过滤器中使用三元运算符来修复它：

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

app.controller('listdata', function($scope, $http) {
$scope.users = [{
    "name": "pravin",
    "queue": [{
        "number": "456",
        "status": "Unavailable"
    }],
    "phone": "7411173737"
},
{
    "name": "pratik",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    },
    {
        "number": "112",
        "status": "Unavailable"
    }],
    "phone": "8558855858"
},
{
    "name": "priyanka",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "5454573737"
},
{
    "name": "prerana",
    "queue": [{
        "number": "111",
        "status": "Unavailable"
    }],
    "phone": "7454543737"
}];
   $scope.filter111 = function (user) {
            return (user.queue.find(({number}) => number === '111'));
        }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.0/angular.min.js"></script>
<div ng-app="myApp">

<label class="switch">
  <input type="checkbox" ng-model="queue111">111
</label>


<div class="row" ng-controller="listdata">

  <div ng-repeat="user in users|filter: queue111? filter111: ''">
    <p> {{user.name}} {{user.phone}}</p>
  </div>
</div>

</div>

【讨论】：