AngularJS NgIf 或 NgHide 如果另一个元素不存在或隐藏

AngularJS NgIf or NgHide if another element is not present or hidden

本文关键字：元素 不存在 另一个 隐藏 如果 NgIf NgHide AngularJS      更新时间：2023-09-26
    <div>
        <ul class="list-inline alert alert-danger col-sm-9">
            <li>
                <h1>Daño Global</h1>
            </li>
            <li ng-repeat="(key, value) in hoy | groupBy: 'central'" ng-if="value.length >= 3" >
                <h1><span class="label label-danger"><% key %></span></h1>
            </li>
        </ul>
    </div>

我从 AJAX 调用中获取了"noquery"并按当前日期过滤，该信息被添加到数组中，从那时起我需要从该数组中获取键，以便我可以隐藏或删除带有 ng-hide 或 ng-if 的元素，如果它有 3 个或更多元素。这就是我问题的背景。

我已经做到了，但如果 li 对象不在 DOM 中或隐藏了，我想隐藏或删除"ul"或整个 DIV。

编辑：我在 li 中使用 ng-if 在其中显示一些信息，如果我在 li 中有超过 3 个具有相同键的元素，我将需要它显示键名称，但如果我不这样做，ul 隐藏或根本不加载。希望我澄清一些疑问

我有点难以理解您的用例，但我认为您是说如果它超过三个项目，您想隐藏整个列表。是这样吗？例如，如果您的中继器中未使用value，我看不到ng-if="value.length >= 3"正在检查的内容。

无论如何，我的猜测是你想测试"hoy"对象中的键数。您可以使用 Object.keys 执行此操作，如下所示：

<ul class="list-inline alert alert-danger col-sm-9" ng-if="Object.keys(hoy) > 3">

这有意义吗？你想隐瞒什么？

大卫，我认为您要做的是在控制器中有一个布尔值，该布尔值查看数组并确定数组是否具有三个以上的元素：

var showDiv= array.length > 0;
var showLI = array.length >= 3;

然后，您将希望在 html 中具有另一个ng-if：

 <div ng-if="showDiv">
    <ul class="list-inline alert alert-danger col-sm-9">
        <li>
            <h1>Daño Global</h1>
        </li>
        <li ng-repeat="(key, value) in hoy | groupBy: 'central'" ng-if= "showLI">
            <h1><span class="label label-danger"><% key %></span></h1>
        </li>
    </ul>
</div>

(请注意，我删除了列表中的ng-if，因为它不再需要(。

我更新了答案以解释您在下面陈述的内容。

感谢您的帮助，您肯定会帮助我跳出框框思考并采取另一个麻烦，这很容易，对于缺乏信息和明确的说明，我深表歉意：

我的控制器：

$http.get(API_URL + "noqueries").then(function(response) {
        $scope.noqueries = response.data;
        var dHoy = []; //Here I'll add the json data in order to filter it
        angular.forEach($scope.noqueries, function(value) {
        dHoy.push(value);
        });
        dHoy = filterFilter(dHoy, {fecha: $scope.date});
        var centrales = $filter('groupBy')(dHoy, "central"); //filter to a matching date.
        $scope.count = 0; //Count of repeating incidents
        $scope.dglobal = [];
        angular.forEach(centrales, function(value, key) {
        if (value.length >= 3) {
          $scope.count+= 1;//This'll triger the div (I asked you about the ul but with the div I feel more confortable, sorry)
          $scope.dglobal.push(key); //Here I save the name of the Key in order to display it later.
        }
        });
    });

我添加了 http.get，以便您可以看到对 json 的调用。

我的观点：

<div ng-if="count > 0"> //This shows only if I have 3 or more values matchig
    <ul class="list-inline alert alert-danger col-sm-9">
        <li>
            <h1>Daño Global</h1> //This was the cause of my problem, I used it as a tag and didn't want it to show up if the li was empty.
        </li>
        <li ng-repeat="d in dglobal" >
            <h1><span class="label label-danger"><% d %></span></h1>// This shows a list of the keys inline.
        </li>
     </ul>
</div>
相关文章：