知道对象是否为空Angularjs

Question

我试图仅在用户首先选择了至少一个复选框时才显示 div 元素。我在 div 中尝试过这个：

<div class="col-md-1" ng-if="selectedElements.length > 0">                

selectedElements 在我的控制器中声明如下：

$scope.selectedElements = [];

第一次工作，但是当我选择一个复选框然后我取消选择它时，div 不会消失。

复选框声明如下：

<input type="checkbox" ng-model="selectedElements[node.real_id]">

复选框位于 ng-repeat 语句中，这就是 ng-model 中索引的原因。

Answer 1

设置ng-model 会在数组的指定索引处添加一个布尔值，然后在取消选中它时将其设置为false。所以它仍然会存在，length 将是 > 0...

可以说，您实际上想要检查的是数组中是否有任何项为真。如果是这种情况，您可以使用：

<div class="col-md-1" ng-if="selectedElements.some((el) => el)">

some 接受一个函数，如果该函数返回 true，则返回 true。我使用了 ECMAScript 2015 语法。如果您使用的是旧版浏览器：

<div class="col-md-1" ng-if="selectedElements.some(function (el) { return el; })">

您可能需要为此在控制器中创建一个函数，但这就是想法。

Answer 2

它第一次工作是因为ng-model="selectedElements[node.real_id]" 将一个值推入索引node.read_ud 处的selectedElements。因此，selectedElements.length > 1 在选中复选框时为 true，但在取消选中时也为 true，selectedElements[node.real_id] 变为 false，因为元素仍在数组中。

我想你想要这样的东西：

<div class="col-md-1" ng-if="selectedCount">

<input type="checkbox" ng-model="selectedElements[node.real_id]" ng-change="onSelect(node.real_id)">

在你的控制器中：

$scope.selectedCount = 0;

$scope.onSelect = function(id) {
    if ($scope.selectedElements[id]) {
        $scope.selectedCount++;
    } else {
        $scope.selectedCount--;
    }
}

另外，selectedElements 也可以是一个对象（用作字典）。

Answer 3

我在控制器中创建了一个函数并像这样使用：

<div class="col-md-1" ng-show="empty(selectedElements)">

并且在控制器中如下：

$scope.empty = function(data){
    var empty = false;
    angular.forEach(data, function(element, key){
        if(element == true)
            empty = true;
    });
    return empty;
}