Question

当范围（$ filter.producers）中的一个或多个值设置为true时，我想显示一个符号（），当所有值都为false时，我想显示另一个（X）。我试图用ng-show做秀，但我找不到让它工作的方法。

我的HTML是这样的：

<div ng-app="myApp" ng-controller="Ctrl">
 {{ctrlTest}}
    <span ng-show="filter.producers == false">X</span>
    <span ng-show="filter.producers != false"></span>
    <hr/>
    <div ng-repeat="elements in filter">
        <div>
            <li ng-repeat="(key,value) in filter.producers" ng-show="value">{{key}}
            <a ng-click="filter.producers[key]=false"> X</a>
            </li>
        </div>
        {{filter.producers}}
    </div>
</div>

我的控制员：

angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.ctrlTest = "Filters";
$scope.filter = {
  "producers": {
    "Ford": true,
    "Honda": true,
    "Ferrari": true
  }   
}
});

这是一个有效的plunker 提前谢谢！

Answer 1

在您的情况下，filter.producers的值是这个对象：{“Ford”：true，..}。它肯定不等于真或假！如果我对你提出正确的问题，那么你应该做的就是获取它的所有价值并检查这些值是否为真或假，如下所示：

//In your controller
 $scope.anyProducerTrue = function() {
    var anyTrue = false;
    angular.forEach($scope.filter.producers, function(value, key) {
      if (true == value) anyTrue = true;
    });
    return anyTrue;
  }

//In your view
<span ng-show="!anyProducerTrue()">X</span>
<span ng-show="anyProducerTrue()"></span>

Answer 2

您需要另一个功能来检查所有属性最初是true还是false，点击(X)链接为特定属性设置false并且不需要两个{您的DOM中的{1}}。你可以尝试我的解决方案。

像：

你的控制器：

ng-repeat

在html中：调用angular.module('myApp', []) .controller('Ctrl', function($scope) { $scope.ctrlTest = "Filters"; $scope.filter = { "producers": { "Ford": true, "Honda": true, "Ferrari": true } }; $scope.hideMe = function(key) { $scope.filter.producers[key]=false; $scope.checkAllproperty(); // call again to check all property }; $scope.checkAllproperty = function() { var allTrue = false; for(var key in $scope.filter.producers) { if($scope.filter.producers[key] === true){ allTrue = true; } } $scope.allTrue = allTrue; }; $scope.checkAllproperty(); // initial call when loaded });函数设置false

hideMe

Answer 3

使用

Object.keys(filter.producers).length;

<span ng-show="Object.keys(filter.producers).length != 0"></span>

JSBIN

Answer 4

您可以在控制器中使用JS Array.prototype.some函数，如下所示：

$scope.flag = Object.keys($scope.filter.producers).some(
  function(el) {
    return $scope.filter.producers[el];
  });

并在您的HTML中使用以下标志：

<span ng-show="!flag">X</span>
<span ng-show="flag"></span>

当某个值为true时，AngularJS ng-show

4 个答案: