AngularJS ng-show是否将对象数组中的属性设置为false

时间:2016-06-02 09:24:21

标签: javascript arrays angularjs

如果div中的任何对象的特定属性设置为array,我想要隐藏false

该属性如下所示:

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

如果div中没有myObjArray设置为IsBuiltIn的对象,我想隐藏false。因此,上述array应隐藏div。以下应该显示它(因为至少有一个对象将IsBuiltIn设置为false):

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

我尝试使用ForEach解决此问题但未成功:

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

这是我的plnkr

1 个答案:

答案 0 :(得分:5)

在Controller中,使用Array#some创建一个函数来检查数组中的任何对象是否具有false属性IsBuiltIn

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

这是使用ES6 arrow function语法。上述功能相当于

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

从视图中调用该功能

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