Каков наилучший способ условно применить класс?

Question

Допустим, у вас есть массив, который отображается в ul с li для каждого элемента и свойством контроллера, называемым selectedIndex.Как лучше всего добавить класс в li с индексом selectedIndex в AngularJS?

В настоящее время я дублирую (вручную) код li и добавляю класс в один изтеги li и использование ng-show и ng-hide для отображения только одного li на индекс.

Answer 1

Я новичок в Angular, но нашел это, чтобы решить мою проблему:

<i class="icon-download" ng-click="showDetails = ! showDetails" ng-class="{'icon-upload': showDetails}"></i>

Это будет условно применять класс, основанный на var. Он начинается с icon-download по умолчанию, при использовании ng-класса я проверяю статус showDetails, если true/false, и применяю класс icon-upload . Работает отлично.

Надеюсь, это поможет.

Answer 2

Это работает как шарм;)

<ul class="nav nav-pills" ng-init="selectedType = 'return'">
    <li role="presentation" ng-class="{'active':selectedType === 'return'}"
        ng-click="selectedType = 'return'"><a href="#return">return

    </a></li>
    <li role="presentation" ng-class="{'active':selectedType === 'oneway'}"
        ng-click="selectedType = 'oneway'"><a href="#oneway">oneway
    </a></li>
</ul>

Answer 3

Это, вероятно, понизится до забвения, но вот как я использовал тернарные операторы 1.1.5 для переключения классов в зависимости от того, является ли строка в таблице первой, средней или последней - за исключением того, что в строке есть только одна строкатаблица:

<span class="attribute-row" ng-class="(restaurant.Attributes.length === 1) || ($first ? 'attribute-first-row': false || $middle ? 'attribute-middle-row': false || $last ? 'attribute-last-row': false)">
</span>

Answer 4

Это в моей работе множественный условно судья:

<li ng-repeat='eOption in exam.examOptions' ng-class="exam.examTitle.ANSWER_COM==exam.examTitle.RIGHT_ANSWER?(eOption.eoSequence==exam.examTitle.ANSWER_COM?'right':''):eOption.eoSequence==exam.examTitle.ANSWER_COM?'wrong':eOption.eoSequence==exam.examTitle.RIGHT_ANSWER?'right':''">
  <strong>{{eOption.eoSequence}}</strong> &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
  <span ng-bind-html="eOption.eoName | to_trusted">2020 元</span>
</li>

Answer 5

ну, я бы посоветовал вам проверить состояние вашего контроллера с помощью функции, возвращающей true или false .

<div class="week-wrap" ng-class="{today: getTodayForHighLight(todayDate, day.date)}">{{day.date}}</div>

и в вашем контроллере проверьте состояние

$scope.getTodayForHighLight = function(today, date){
return (today == date);
}

Answer 6

частичное

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

контроллер

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };

Answer 7

Вот еще один вариант, который хорошо работает, когда нельзя использовать ng-класс (например, при стилизации SVG):

ng-attr-class="{{someBoolean && 'class-when-true' || 'class-when-false' }}"

(я думаю, что для использования ng вам нужно быть на последней нестабильной версии Angular.-attr-, я сейчас на 1.1.4)

Answer 8

Проверить http://www.codinginsight.com/angularjs-if-else-statement/

Печально известное заявление angularjs if else !!! Когда я начал использовать Angularjs, я был немного удивлен, что не смог найти оператор if / else.

Итак, я работал над проектом и заметил, что при использовании оператора if / else условие отображается при загрузке. Вы можете использовать нг-плащ, чтобы исправить это.

<div class="ng-cloak">
 <p ng-show="statement">Show this line</span>
 <p ng-hide="statement">Show this line instead</span>
</div>

.ng-cloak { display: none }

Спасибо amadou

Answer 9

Просто добавив что-то, что сработало для меня сегодня, после долгих поисков ...

<div class="form-group" ng-class="{true: 'has-error'}[ctrl.submitted && myForm.myField.$error.required]">

Надеюсь, это поможет вам в успешном развитии.

=)

Синтаксис недокументированного выражения: отличная ссылка на сайт ... =)

Answer 10

Если у вас есть общий класс, который применяется ко многим элементам, вы можете создать пользовательскую директиву, которая добавит этот класс, например, ng-show / ng-hide.

Эта директива добавит класс 'активный' к кнопке, если она нажата

module.directive('ngActive',  ['$animate', function($animate) {
  return function(scope, element, attr) {
    scope.$watch(attr.ngActive, function ngActiveWatchAction(value){
      $animate[value ? 'addClass' : 'removeClass'](element, 'active');
    });
  };
}]);

Подробнее