ng-класс не работает с ng-repeat

Question

У меня есть ситуация, когда я должен добавить класс в соответствии с условием, а ng-класс работает в соответствии с ним, даже если условие в ng-классе истинно.

<ul id="" class="clowd_wall" dnd-list="vm.cardData[columns.id].data" 
            dnd-drop="vm.callback(item,{targetList: vm.cardData[columns.id].data, targetIndex: index, event: event,item:item,type:'folder',eventType:'sort','root':'folder',current_parent:'folder'})" ng-model="vm.cardData[columns.id].data">
               <div class="emptyCol" ng-if="vm.cardData[columns.id].data.length==0">Empty</div>
              <li class="dndPlaceholder"></li>
              <li class="cont____item" ng-repeat="card in vm.cardData[columns.id].data | orderBy:vm.sort" dnd-draggable="card"
         dnd-effect-allowed="move"
        dnd-allowed-types="card.allowType"
        dnd-moved="vm.cardData[columns.id].data.splice($index, 1)"
        dnd-selected="vm.tree.selected = card"  ng-class="{emptyCard:card.data.length==0,zoomin:vm.zoomin=='zoomin',emptyCard:!card.data}">
                 <div class="item" style="height:79%">
                    <ng-include ng-init = "root = columns.id" src="'app/partials/card.html'"></ng-include>
                 </div>
              </li>
           </ul>

Answer 1

Ваш вопрос неясен, так как не знаю, что будет содержать card.data и ".data" будет присутствовать для каждой итерации

Если это массив, то это будет работать "card.data.length«и если в« карточке »нет ключа« data », то« .length »будет ошибкой, т. е. если сама card.data не определена, то она не будет иметь свойства« length ».

Попробуйте добавить условие вng-class один за другим, тогда вы сможете выяснить, какое условие вызывает проблему.

Answer 2

Сделано небольшое изменение

ng-class="{emptyCard: card.data.length==0 || !card.data,zoomin: vm.zoomin=='zoomin'}"

Если у вас несколько выражений, попробуйте старомодно, если оно выглядит лучше:

Контроллер

$scope.getcardClass = function (objCard, strZoomin) {
    if (!card.data) {
        return 'emptyCard';
    } else if (strZoomin =='zoomin') {
        return 'zoomin';
    } else if (card.data.length == 0) {
        return 'emptyCard';
    }
};

HTML

ng-class="vm.getcardClass(card, vm.zoomin)"

ПРИМЕЧАНИЕ: замените vm на ваш объект контроллера.

Answer 3

ng-class="{'emptyCard': (!card.data || !vm.cardData[columns.id].data.length),'zoomin':(vm.zoomin=='zoomin')}">

Похоже, вы хотите использовать vm.cardData[columns.id].data.length вместо card.data.length