AngularJS ng-show when some value is true

Question

I want to display one symbol (🗸) when one or more of the values in a scope ($filter.producers) is set to true, and another one (X) when all the values are false. I am trying to do show with ng-show, but I cannot find the way to make it work.

My html goes like this:

<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>

And my controller:

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

Here is a working plunker Thanks in advance!

Answer 1

The value of filter.producers in your case, is this object: {"Ford": true, ..}. It certainly will not equals to true or false! If I get you question correctly, what you should do is plucking all it's value and check if any of these value is true or false, something like this:

//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

you need another function to check all properties are true or false initially and when click (X) link to set false for a specific property and do not need two ng-repeat in your DOM. you can try my solution.

like:

your controller:

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

in html: call a hideMe function to set false

<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>

Answer 3

use

Object.keys(filter.producers).length;

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

JSBIN

Answer 4

you can use the JS Array.prototype.some function in your controller as follows:

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

and in your HTML use the flag as follows:

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