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

Question

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

I have "noquery" taken from an AJAX call and filtered by current date, that info is added to an array, from that point I need to take the Keys from that array so I can Hide or remove the element with ng-hide or ng-if if it has 3 or more element. That's the context of my question.

I have done it but I want to hide or remove the "ul" or the entire DIV if the li object is not in the DOM or if it's hidden.

Edit: I use the ng-if in the li to show some info in it, I'll need that if in the li if I have more than 3 elements with the same key shows the key name but if I don't the ul hides or don't load at all. Hope I clarify some of the doubts

Answer 1

I'm struggling a little to understand your use case, but I think you're saying that you want to hide the entire list if it would be longer than three items. Is that the case? For example, I don't see what ng-if="value.length >= 3" is checking, if value isn't used in your repeater.

In any case, my guess is that you want to test for the number of keys in the "hoy" object. You'd do that using Object.keys , like this:

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

Does that make sense? What is it that you're trying to hide?

Answer 2

David, I think that what you want to do is have a boolean in the the controller that looks at the array and determines whether the array has more than three elements:

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

Then, you will want to have another ng-if in the html:

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

(Notice I got rid of the ng-if in the list as it is no longer necessary).

I updated the answer to account for what you state below.

Answer 3

Thanks for the help people, you surely help me to think out of the box and take another aproach, it was so easy, I apologize for the lack of info and clear instructions:

My controller:

$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.
        }
        });
    });

I added the http.get so you can see the call to the json.

My view:

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