Question

这是我的控制器：

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的记录。

我到目前为止所做的：

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

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

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

1 个答案: