AngularJS：如何在ng-repeat外判断是否有项满足ng-show条件？

嘿，这问题很常见，咱们有几种简单的方法来实现你想要的效果，我给你一一说明：

方法1：在控制器中添加计算方法 #

最直观的方式是在你的UserController里写一个方法，专门用来检查是否有用户的Changed属性为true。这样模板里直接调用这个方法就行：

控制器代码 #

angular.module('myApp', [])
.controller('UserController', function() {
  // 你的用户列表
  this.users = [{Name:"Bob", Changed: false}, {Name:"Alice", Changed: true}];
  
  // 新增方法：判断是否有用户已修改
  this.hasChangedUsers = function() {
    // 使用Array.some()快速判断是否存在符合条件的项
    return this.users.some(user => user.Changed === true);
  };
});

模板代码 #

<div ng-controller="UserController as uController">
  <span>Users</span>
  <!-- 调用控制器的方法来判断 -->
  <span ng-show="uController.hasChangedUsers()"> - one or more users have changed</span>
  <div ng-repeat="user in uController.users" >
    {{user.Name}} <span ng-show="user.Changed"> - changed</span>
  </div>
</div>

这种方法的好处是逻辑清晰，维护起来方便，而且Array.some()会在找到第一个符合条件的项后就停止遍历，性能也不错。

方法2：直接在模板中使用Filter #

如果你不想修改控制器代码，可以直接在模板里用Angular内置的filter来过滤出Changed为true的用户，然后判断长度是否大于0：

模板代码 #

<div ng-controller="UserController as uController">
  <span>Users</span>
  <!-- 用filter过滤后判断长度 -->
  <span ng-show="(uController.users | filter:{Changed: true}).length > 0"> - one or more users have changed</span>
  <div ng-repeat="user in uController.users" >
    {{user.Name}} <span ng-show="user.Changed"> - changed</span>
  </div>
</div>

这种方法不用动控制器，适合快速实现，但要注意：如果你的用户列表很大，每次Angular的digest循环都会重新执行过滤操作，可能会有轻微的性能损耗，小列表的话完全没问题。

方法3：用$watch监听列表变化（性能最优） #

如果你的用户列表会频繁更新，而且数据量比较大，推荐用$watch来监听列表的变化，提前计算好结果并存在变量里，避免重复计算：

控制器代码 #

angular.module('myApp', [])
.controller('UserController', function($scope) {
  this.users = [{Name:"Bob", Changed: false}, {Name:"Alice", Changed: true}];
  this.anyChanged = false;
  
  // 深度监听users数组的变化
  $scope.$watch(() => this.users, (newUsers) => {
    this.anyChanged = newUsers.some(user => user.Changed === true);
  }, true); // 第三个参数true表示深度监听对象/数组的内部变化
});

模板代码 #

<div ng-controller="UserController as uController">
  <span>Users</span>
  <!-- 直接使用提前计算好的变量 -->
  <span ng-show="uController.anyChanged"> - one or more users have changed</span>
  <div ng-repeat="user in uController.users" >
    {{user.Name}} <span ng-show="user.Changed"> - changed</span>
  </div>
</div>

这种方法只会在用户列表真正变化的时候重新计算，性能最好，适合复杂场景。

你可以根据自己的实际需求选择其中一种方法，都能完美实现你要的效果！

内容的提问来源于stack exchange，提问作者John