當某個值爲真時AngularJS ng-show

當一個作用域（$ filter.producers）中的一個或多個值設置爲true時，我想顯示一個符號（），而當所有值是錯誤的。我正在嘗試使用ng-show進行顯示，但我無法找到使其工作的方式。當某個值爲真時AngularJS 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 提前感謝！

來源

2016-04-03 Joe82

問題並不清楚。請提供更詳細的解釋。 – Roy

你忘了問這個問題！ – svarog

你的情況filter.producers的價值，這是對象：{「福特」：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>

來源

2016-04-03 13:18:03

完美的作品，它是更清潔的解決方案。我會將其標記爲有效。謝謝！ – Joe82

使用

Object.keys(filter.producers).length; 

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

JSBIN

來源

2016-04-03 12:43:14 underscore

在JSBin中嘗試瞭解決方案，但是當所有值都設置爲false時，它不會更改符號 – Joe82

問題主體的這一行的含義是什麼？ '當一個範圍中的一個或多個值（$ filter.producers）'。現在你說另一種情形 – underscore

如果FX $ scope.filter = { 「生產商」：{ 「福特」：假的，「本田」：假的，「法拉利」：真 }} 我希望出現 – Joe82

可以使用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>

來源

2016-04-03 12:51:48

我試過你的解決方案，但它似乎沒有當所有的值都爲false時更改圖標，請檢查此更新的jsfiddle http://jsfiddle.net/ba77zwqs/5/ – Joe82

它在這裏工作：http：// jsfiddle。net/asafusan/fm5kers7/1/ –

你需要點擊'運行'按鈕後全部更改爲虛假 –

你需要另一個函數來檢查所有屬性都true或false最初，當點擊(X)鏈接來設置false特定屬性，並不需要兩個ng-repeat在你的DOM。你可以試試我的解決方案。

喜歡：

控制器：

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 
    });

在HTML：調用hideMe函數來設置假

<div ng-app="myApp" ng-controller="Ctrl"> 
    {{ctrlTest}} 
    <span ng-show="!allTrue">X</span> 
    <span ng-show="allTrue"></span> 
    <p> 
    {{filter.brewers}} 
    </p> 
    <hr/> 
    <div> 
    <div> 
     <li ng-repeat="(key,value) in filter.producers" ng-show="value">{{key}} 
     <a ng-click="hideMe(key)"> X</a> // call to set this key false 
     </li> 
    </div> 
    {{filter.producers}} 
    </div> 
</div>

來源

2016-04-03 12:57:38

謝謝！它按預期工作 – Joe82

當某個值爲真時AngularJS ng-show

回答

相關問題