angularjs 过滤为 return 只有完全匹配的值

Question

我的 angularjs 应用程序中有一个复选框作为过滤器：

这是我的数据：

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"
}];

});

我在我的视图中显示上述数据是这样的：

//这是过滤器

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

//ng-重复部分

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

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

是否可以做类似

的事情

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

Current output : it displays all the four data objects in $scope.users

Expected output : display only the data objects where in queue number is 111 in $scope.users

我该怎么做？

Answer 1

您可以将 true 传递给过滤器以启用严格匹配。

<div ng-repeat="user in users|filter:queue111:true">

Answer 2

尝试使用此自定义过滤器函数来仅匹配队列数组中的值。

var Controller = function($scope) {
  $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.filter = function(item) {
    if ($scope.queue111) {
      return JSON.stringify(item.queue).includes($scope.queue111);
    } else {
      return true;
    }
  };

};

angular
  .module('app', [])
  .controller('Controller', Controller);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller">
  <label class="switch">
    <input ng-true-value='111' ng-false-value='' type="checkbox" ng-model="queue111">
  </label>
  <pre>Search value: {{queue111}}</pre>
  <div ng-repeat="user in users | filter:filter">
    {{user.name}} {{user.phone}}
  </div>
</div>

Answer 3

我通过在过滤器中使用自定义函数和三元运算符修复它：

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 过滤为 return 只有完全匹配的值

angularjs filter to return only the exact matching values

javascript

html

angularjs

angularjs-filter