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

查看：29
本文介绍了angularjs 仅在选中复选框时应用自定义过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的控制器:

app.controller('listdata', function($scope, $http) {$scope.users = [{"name": "pravin",队列": [{"number": "456",状态":不可用"}],电话":7411173737"},{"name": "pratik",队列": [{"number": "111",状态":不可用"}],电话":8558855858"},{"name": "priyanka",队列": [{"number": "111",状态":不可用"}],电话":5454573737"},{"name": "prerana",队列": [{"number": "111",状态":不可用"}],电话":7454543737"}];$scope.filter111 = 函数(用户){return (user.queue.find(({number}) => number === '111'));}});

这是我的观点:

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

<块引用>

到目前为止我所做的:

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

111

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

解决方案

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

var app = angular.module('myApp', []);app.controller('listdata', function($scope, $http) {$scope.users = [{"name": "pravin",队列": [{"number": "456",状态":不可用"}],电话":7411173737"},{"name": "pratik",队列": [{"number": "111",状态":不可用"},{"number": "112",状态":不可用"}],电话":8558855858"},{"name": "priyanka",队列": [{"number": "111",状态":不可用"}],电话":5454573737"},{"name": "prerana",队列": [{"number": "111",状态":不可用"}],电话":7454543737"}];$scope.filter111 = 函数(用户){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<div class="row" ng-controller="listdata"><div ng-repeat="user in users|filter: queue111? filter111: ''"><p>{{user.name}} {{user.phone}}</p>

this is my 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'));
        }
});

and this is my view :

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

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 :

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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆