知道对象是否为空 Angularjs

Question

我试图仅在用户首先 select 选中至少一个复选框时才显示 div 元素。我在 div:

中尝试过这个

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

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

$scope.selectedElements = [];

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

复选框声明如下：

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

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

Answer 1

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

我想你想要这样的东西：

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

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

可以说您真正想要的是检查数组中是否有任何项目为真。如果是这样，您可以使用：

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

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

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

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

Answer 3

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

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

而在controller中是这样的：

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

知道对象是否为空 Angularjs

Know if object is empty Angularjs

html

checkbox

angularjs

angular-ng-if