javascript - AngularJS仅在选中复选框时应用自定义过滤器

Question

这是我的 Controller :

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，因为它包含电话号码 7411173737，其中包含 111。我希望此过滤器仅显示队列号码的记录与 111 匹配，而不与任何其他字段(例如此处的电话号码)匹配。因此过滤器应该只显示队列号为 111 的记录。

What I have done till now :

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

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

但它不是这样工作的。 我如何实现这一目标？

Answer 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>