angularjs仅在选中复选框时应用自定义过滤器 [英] angularjs apply custom filter only when checkbox is checked

问题描述

这是我的控制器:

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的用户.但是由于包含电话号码7411173737(其中包含111)，它还会显示用户pravin.我希望此过滤器仅显示其队列号的记录.与111匹配，而不与此处的电话号码等任何其他字段匹配.因此，筛选器应仅显示队列号为111的记录.

When I start the app all the four users from the users data array are displayed. When I click on the filter checkbox, it displays the users who have a queue with a number 111. but it also displays the user pravin as it contains a phone number 7411173737 which contains 111. I want this filter to only display records whose queue number matches with 111 and not with any other fields like the phone number here. So the filter should only display records where the queue number is 111.

我到目前为止所做的事情:

What I have done till now :

我已经提出了一个自定义功能如上面的仅返回那些谁拥有队列数作为111的用户想使用该功能作为过滤器时，复选框被选中的代码.如果我直接在用户| filter:filter111中执行ng-repeat ="user inusers | filter:filter111"，则它仅在应用程序启动时显示队列号为111的记录(即仅3条记录)(应在应用程序启动时显示所有四个记录).因此，我希望仅在选中复选框并将其用作过滤器时才触发此功能. 我想到了这样的东西:

I have come up with a custom function $scope.filter111 as shown in the code above which returns only those users who have a queue number as 111. I want to use this function as a filter when the checkbox is checked. If I directly do ng-repeat="user in users|filter:filter111" it only displays records with queue number 111(i.e only 3 records) when the app starts(all the four records should be displayed when app starts). So I want this function to be fired only when I check the checkbox and apply it as a filter. I was think of something like this :

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

，但这种方式无法正常工作. 我该如何实现?

but it's not working this way. How do I achieve this?

推荐答案

我通过在过滤器中使用三元运算符来解决此问题:

I fixed it like this by using the ternary operator in the filter:

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>

这篇关于angularjs仅在选中复选框时应用自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！