Отображение элемента в углах на основе условия в массиве объектов

0

У меня есть следующий элемент.

<div> My element</div>

и следующий объект:

$scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}

Как я могу отображать элемент ТОЛЬКО, если весь статус ALIVE.

Я знаю, как использовать ng-show для переменной, но как насчет такого состояния?

  • 0
    В общем, вы, вероятно, использовали бы ng-if, но может быть другой путь в зависимости от того, как вы используете myObject.life_log? В ng-repeat вы будете перебирать все объекты в коллекции? Как-то иначе?
Теги:

4 ответа

2

Вам нужно будет создать функцию, которая будет проходить через ваш массив и проверяет, являются ли все статусы "ALIVE". Или просто используйте метод уменьшения массива:

$scope.allStatusesAreAlive = $scope.myObject.life_log.reduce(function(a, b) {
    if (a === false) return false;
    if (b.status === 'DEAD') return false;
    return true;
}, true);

Затем вы можете отобразить свой элемент, если $ scope.allStatusesAreAlive имеет значение true:

<div ng-if="allStatusesAreAlive"> My element</div>
Поделиться
  • 0
    Потрясающие. Я пытался использовать функцию, но myobject всегда пуст. Я предполагаю, потому что вид построен раньше. Как мне это исправить?
  • 0
    Если вы делаете AJAX-запрос на получение данных для myObject, то вам нужно указать angular для обновления представления. Вы можете сделать это, поместив свой код в $ timeout (который запускает цикл дайджеста, который перерисовывает представление. $ Timeout вызывает $ rootScope. $ Digest, который запускает цикл дайджеста). Вам нужно будет внедрить службу $ timeout в свой контроллер и использовать ее следующим образом: $ timeout (function () {update myObject here});
Показать ещё 1 комментарий
1

Вы можете сделать что-то подобное

angular.forEach($scope.myObject.life_log, function(item){
    if(item.status !=='ALIVE'){
        $scope.isAlive = false;
        break;
    }else{
        $scope.isAlive = true;
    }
});

затем в вашем html

<div data-ng-if="isAlive">My element</div>
Поделиться
0

Проверьте следующую ссылку

https://plnkr.co/edit/ermeKk1dBX8D54pL7vHQ?p=preview

угловой код:

  $scope.myObject = {'life_log' : [{status: 'ALIVE'},{status: 'DEAD'}]}
             $scope.val=true;
              for(i=0;i<$scope.myObject.life_log.length;i++){

                if($scope.myObject.life_log[i].status != "ALIVE")
                $scope.val=false;
              }

html-код:

<div ng-show="val">My element</div>
Поделиться
-2 
// This is here to make it configurable
$scope.keys = Object.keys($scope.myObject);

// In this case you have the "life_log" key
$scope.keys.forEach(k => {
   $scope.myObject[k].forEach((d) => {
      // our object here is myObject["life_log"];
      // obj is a temp array to check the amount of statuses that are dead 
      var obj = [];
      d["allAlive"] = d.status.forEach( s =>{
         if(s == 'DEAD'){
            obj.push("Dead");
         }
      });
      if(obj.length > 0){
         d.allAlive = false
      }else{
         d.allAlive = true;
      }
   });
});

   <div ng-if="myObject[o].allAlive>
      ALL ALIVE
   </div>
Поделиться

Ещё вопросы

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