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]"正在将值selectedElements推送到索引node.read_ud。因此，当选中复选框时selectedElements.length > 1为真，但取消选中并且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;
}

知道对象是否为空Angularjs

3 个答案: