AngularJS中ng-show多表达式失效问题咨询及解决方法

嘿，我来帮你排查这个问题！你说原来用ng-show="!container.isfavorite"能正常过滤条目，但改成!container.isfavorite || !container.isHidden后，所有条目都显示出来，而且没有报错——这大概率是两个原因：逻辑表达式不符合你的实际需求，或者属性未初始化导致判断异常。

先理清楚你的需求逻辑 #

首先得明确你想实现什么：

• 如果你想隐藏那些“既是收藏又是被隐藏”的条目（也就是只要不同时满足“收藏+隐藏”就显示），那你的表达式!container.isfavorite || !container.isHidden是逻辑正确的，但可能是属性初始化的问题导致失效。
• 如果你想只显示“既不是收藏也没被隐藏”的条目，那你应该用&&而不是||，也就是：

  <tr ng-show="!container.isfavorite && !container.isHidden" ng-repeat="container in account">
  

  因为||是“或”逻辑，只要其中一个条件成立就会显示；而&&是“与”逻辑，必须两个条件都满足才显示。

关键问题：属性未初始化导致判断异常 #

看你的代码，你给isfavorite加了ng-init="container.isfavorite = false;"，但isHidden没有做初始化！在AngularJS中，未定义的属性取反会得到true——也就是说，如果某个container的isHidden是undefined，那!container.isHidden就等于true，这时候不管isfavorite是什么值，!container.isfavorite || true的结果都是true，自然会显示所有条目。

解决初始化问题的两种方法：

1. 在Controller中统一初始化（推荐）
   在获取到account数据后，遍历给每个container补上默认值：

   // 假设你的account数据存在$scope中
   $scope.account.forEach(function(container) {
     // 确保isfavorite有默认值
     container.isfavorite = angular.isDefined(container.isfavorite) ? container.isfavorite : false;
     // 给isHidden加上默认值false
     container.isHidden = angular.isDefined(container.isHidden) ? container.isHidden : false;
   });
   

2. 在模板中给isHidden加ng-init
   虽然不如Controller初始化靠谱，但可以临时解决：

   <md-button ng-class="{zebbi : container.isHidden}" ng-click="container.isHidden =!container.isHidden; Hidecontainer(container.isHidden, container.containerId);" class="md-icon-button md-accent md-warn" aria-label="Hide">
     <ng-md-icon ng-if="!container.isHidden" icon="remove_red_eye" ng-init="container.isHidden = false;"></ng-md-icon>
     <ng-md-icon ng-if="container.isHidden" icon="panorama_fisheye"></ng-md-icon>
   </md-button>
   

最后验证一下 #

当你确保每个container的isfavorite和isHidden都是true或false，再根据你的需求选择||或&&，ng-show就能正常工作啦！

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