AngularJS NgIf или NgHide, если другой элемент отсутствует или скрыт

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

У меня есть "noquery", взятый из вызова AJAX и отфильтрованный по текущей дате, эта информация добавляется в массив, с этой точки мне нужно взять ключи из этого массива, чтобы я мог скрыть или удалить элемент с помощью ng-hide или ng если он имеет 3 или более элемента. Это контекст моего вопроса.

Я сделал это, но я хочу скрыть или удалить "ul" или весь DIV, если объект li не находится в DOM или если он скрыт.

Редактирование: я использую ng-if в li, чтобы показать какую-то информацию в нем, мне нужно, если в li, если у меня есть более трех элементов с одним и тем же ключом, отображается имя ключа, но если я не буду использовать ul скрывается или вообще не загружается. Надеюсь, я уточню некоторые из сомнений

  • 0
    Итак, если значение> 3, вы хотите скрыть теги <li>?
  • 0
    Я думаю, что он говорит, что если value.length < 3 , тогда не будет элементов li и он не хочет, чтобы элемент ul отображался. Это неправильно?
Показать ещё 1 комментарий

3 ответа

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

Дэвид, я думаю, что то, что вы хотите сделать, это иметь логическое значение в контроллере, которое смотрит на массив и определяет, имеет ли массив более трех элементов:

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

Затем вам понадобится еще один ng-if в 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>

(Обратите внимание, что я избавился от ng-if в списке, поскольку он больше не нужен).

Я обновил ответ, чтобы узнать, что вы заявляете ниже.

  • 0
    Может быть, мне нужен показ div, если у меня есть хотя бы один показ ключа, мне нужно показать только ключи с 3 или более значениями
  • 0
    Итак, Дэвид, я обновил ответ, но он выглядит странно для меня. Что произойдет сейчас, так это то, что если количество элементов больше 0, то будет отображаться неупорядоченный список только с одним элементом (Dano Global). Это то, что вы намерены? Если вы намереваетесь скрыть элемент ul , я бы порекомендовал использовать оригинальный код. Возможно, вы захотите поставить скрипку, чтобы показать всем, что вы пытаетесь сделать.
0

Я немного пытаюсь понять ваш случай использования, но я думаю, вы говорите, что хотите скрыть весь список, если он будет длиннее трех элементов. Это так? Например, я не вижу, что ng-if="value.length >= 3", если value не используется в вашем повторителе.

В любом случае, я предполагаю, что вы хотите проверить количество ключей в объекте "hoy". Вы сделали бы это с помощью Object.keys, например:

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

Имеет ли это смысл? Что вы пытаетесь скрыть?

  • 0
    Извините за это, я сделаю все возможное, чтобы объяснить, мое значение li тестирования состоит в том, что мне нужно отобразить ключ, если этот ключ содержит более 3 значений, в конечном итоге это список предупреждений, поэтому у меня есть имя в Сначала li называется daño global для использования в качестве метки, говорящей о том, что в следующих местах у нас есть повреждение, li со значениями указывает места, я хочу, чтобы весь ul отображался только в том случае, если у нас есть зоны с повреждением, то есть ul существует только в том случае, если этот конкретный li существует, я пытался использовать div, чтобы обернуть все и скрыть его, если у li нет ключа с 3 или более значениями, но я новичок, я

Ещё вопросы

Сообщество Overcoder
Наверх
Меню