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

时间:2016-03-28 19:24:27

标签: javascript jquery css angularjs

        
    <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”并按当前日期过滤,该信息被添加到数组中,从那时起我需要从该数组中获取Keys,以便我可以使用ng-隐藏或删除元素隐藏或ng-if它是否有3个或更多元素。这是我的问题的背景。

我已经完成了但是如果li对象不在DOM中或隐藏它,我想隐藏或删除“ul”或整个DIV。

编辑:我使用li中的ng-if来显示其中的一些信息,如果我在li中,如果我有超过3个元素,使用相同的键显示键名,但是如果我不知道,我将需要ul隐藏或根本不加载。希望我澄清一些疑惑

3 个答案:

答案 0 :(得分:0)

我为了解你的用例而苦苦挣扎,但我认为如果它超过三个项目你想要隐藏整个列表。是这样的吗?例如,如果您的转发器中未使用ng-if="value.length >= 3",我就不会看到value正在检查的内容。

无论如何,我的猜测是你要测试&#34; hoy&#34;中的键数。宾语。您可以使用Object.keys执行此操作,如下所示:

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

这有意义吗?你试图隐藏的是什么?

答案 1 :(得分:0)

大卫,我认为你想要做的是在控制器中有一个布尔值来查看数组并确定数组是否有三个以上的元素:

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,因为它已不再需要了。)

我更新了答案以说明您在下面说明的内容。

答案 2 :(得分:0)

感谢大家的帮助,你肯定会帮助我开箱即用,并采取另一种方式,这很容易,我为缺乏信息和明确的指示道歉:

我的控制器:

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