Angular:如何根据模型中过滤的元素数量隐藏DOM元素

Angular: how to hide DOM element based on the number of filtered elements in model?

本文关键字：元素 DOM 隐藏 过滤 何根 模型 Angular      更新时间：2024-07-02

这里有一个简单的控制器，它包含一个用户列表：

<script type="text/javascript">
    angular.module('project', [])
     .controller('UsersController', ['$scope', function ($scope) {
         $scope.users = [
           { text: 'User 1', done: true, extension: 123 },
           { text: 'Another user', done: false, extension: 456 }];
     }]);
     $scope.selectedUsers = function () {
         var results = [];
         for (i = 0; i < $scope.users.length; i++) {
             if ($scope.users[i].done) {
                 results.push($scope.users[i]);
             }
         }
         return results;
     };
</script>

还有一个简单的HTML，它只为每个用户显示一个复选框，如果没有选择用户，则显示一条选择消息。

<div ng-app="project" ng-controller="UsersController">
    <input type="checkbox" ng-repeat="user in users" ng-model="user.done" id="selectUser{{$index}}" />
    <div ng-hide="selectedUsers().length">Select something</div>     
</div>

代码是有效的，但看起来有点难看。

有没有一种程序性较低的方法可以得到同样的结果？

您可以简单地根据done属性筛选用户集并检查其长度。

<div ng-hide="(users | filter:{done:true}).length">Select something</div>  


angular.module('project', [])
.controller('UsersController', ['$scope', function ($scope) {
  $scope.users = [
    { text: 'User 1', done: true, extension: 123 },
    { text: 'Another user', done: false, extension: 456 }];
 }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="project" ng-controller="UsersController">
  <input type="checkbox" ng-repeat="user in users" ng-model="user.done" id="selectUser{{$index}}" />
  <div ng-hide="(users | filter:{done:true}).length">Select something</div>  
</div>

实现它的方式相当低效，因为selectedUsers函数在所有用户上迭代，在每个摘要上运行。如果用户数量较少，这可能是可以接受的。

然而，为了完整起见，另一种方法是计算user.done === true的数量并跟踪计数（而不是重新计数）：

$scope.users = [
   { text: 'User 1', done: true, extension: 123 },
   { text: 'Another user', done: false, extension: 456 }];
$scope.selection = {count: 0};
for (var i=0; i<$scope.users.length; i++){
   if ($scope.users[i].done) $scope.selection.count++;
}

并在选择的每个ng-change上修改selection.count：

<div ng-app="project" ng-controller="UsersController">
    <input type="checkbox" ng-repeat="user in users" 
           ng-model="user.done"
           ng-change="selection.count = selection.count + user.done * 2 - 1">
    <div ng-hide="selection.count">Select something</div>     
</div>

（注意，如果是这样的话，我必须使用一个对象selection，它持有属性count；由于原型继承的工作方式以及ng-repeat创建子作用域的事实，仅仅使用$scope.selectionCount是不起作用的）

相关文章：