jisaak jisaak - 6 months ago 46
Javascript Question

AngularJS ng-show if a property within an object array is set to false

I want to hide a

div
if no object within a
array
has a specific property set to
false
.

The property looks like this:

$scope.myObjArray = [
{"Id":"1","IsBuiltIn":true},
{"Id":"2","IsBuiltIn":true}
];


I want to hide my
div
if there is no object within
myObjArray
that has
IsBuiltIn
set to
false
. So the above
array
should hide the
div
. The following should show it (because at least one object has
IsBuiltIn
set to false):

$scope.myObjArray = [
{"Id":"1","IsBuiltIn":true},
{"Id":"2","IsBuiltIn":true},
{"Id":"3","IsBuiltIn":false}
];


I tried to solve this using a
ForEach
without success:

<div ng-show="myObjArray.ForEach(e, function(){e.IsBuiltIn})">
Hello, World!
</div>


Here is my plnkr.

Answer

In Controller, create a function to check if any of the object in the array has false value for the property IsBuiltIn using Array#some

$scope.containsFalsy = (arr) => arr.some(o => o.IsBuiltIn === false);

This is using ES6 arrow function syntax. The above function is equivalent to

$scope.containsFalsy = function (arr) {
    return arr.some(function (obj) {
        return obj.IsBuiltIn === false;
    });
};

Call the function from the View

<div ng-hide="containsFalsy(myObjArray)">

Plunker Demo

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.myObjArray = [{
    "Id": "1",
    "IsBuiltIn": true
  }, {
    "Id": "2",
    "IsBuiltIn": true
  }];

  $scope.myObjArray1 = [{
    "Id": "1",
    "IsBuiltIn": true
  }, {
    "Id": "2",
    "IsBuiltIn": true
  }, {
    "Id": "3",
    "IsBuiltIn": false
  }];

  $scope.containsFalsy = (arr) => arr.some(o => o.IsBuiltIn === false);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <div ng-hide="containsFalsy(myObjArray)">
      Hello, World!
    </div>


    <div ng-hide="containsFalsy(myObjArray1)">
      Can you see me?
    </div>
  </div>
</div>