Тройная в шаблонах

Как вы делаете тройной с AngularJS (в шаблонах)?

Было бы неплохо использовать некоторые атрибуты html (классы и стиль) вместо создания и вызова функции контроллера.

ОТВЕТЫ

Ответ 1

Обновить: Angular 1.1.5 добавлен тернарный оператор, поэтому теперь мы можем просто написать

<li ng-class="$first ? 'firstRow' : 'nonFirstRow'">

Если вы используете более раннюю версию Angular, ваши два варианта:

  • (condition && result_if_true || !condition && result_if_false)
  • {true: 'result_if_true', false: 'result_if_false'}[condition]

элемент 2. выше создает объект с двумя свойствами. Синтаксис массива используется для выбора свойства с именем true или с именем с именем false и возвратом связанного значения.

например.

<li class="{{{true: 'myClass1 myClass2', false: ''}[$first]}}">...</li>
 or
<li ng-class="{true: 'myClass1 myClass2', false: ''}[$first]">...</li>

$сначала устанавливается значение true внутри ng-repeat для первого элемента, поэтому выше будет применяться класс 'myClass1' и 'myClass2' только в первый раз через цикл.

С ng-class существует более простой способ: ng-класс принимает выражение, которое должно оцениваться одним из следующих:

  • строка имен классов с разделителями пространства
  • массив имен классов
  • map/object имен классов для булевых значений.

Пример 1) приведен выше. Вот пример из 3, который, по моему мнению, читается намного лучше:

 <li ng-class="{myClass: $first, anotherClass: $index == 2}">...</li>

В первый раз через цикл ng-repeat добавлен класс myClass. 3-й раз (значение $index начинается с 0), добавляется класс anotherClass.

ng-style принимает выражение, которое должно оценивать к карте/объекту имен стиля CSS в значениях CSS. Например.

 <li ng-style="{true: {color: 'red'}, false: {}}[$first]">...</li>

Ответ 2

Обновление: Angular 1.1.5 добавлен тернарный оператор, этот ответ верен только для версий, предшествующих 1.1.5. Для версии 1.1.5 и более поздних версий см. Текущий принятый ответ.

До Angular 1.1.5:

Форма тройного в угловом порядке:

((condition) && (answer if true) || (answer if false))

Пример:

<ul class="nav">
    <li>
        <a   href="#/page1" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Goals</a>
    </li>
    <li>
        <a   href="#/page2" style="{{$location.path()=='/page2' && 'color:#fff;' || 'color:#000;'}}">Groups</a>
    </li>
</ul>

или

 <li  ng-disabled="currentPage == 0" ng-click="currentPage=0"  class="{{(currentPage == 0) && 'disabled' || ''}}"><a> << </a></li>

Ответ 3

Для текстов в шаблоне angular (userType является свойством $scope, например $scope.userType):

<span>
  {{userType=='admin' ? 'Edit' : 'Show'}}
</span>

Ответ 4

В настоящее время мы все узнали версию 1.1.5, которая имеет подходящую тройку в функции $parse, поэтому просто используйте этот ответ как пример фильтров:

angular.module('myApp.filters', [])

  .filter('conditional', function() {
    return function(condition, ifTrue, ifFalse) {
      return condition ? ifTrue : ifFalse;
    };
  });

И затем используйте его как

<i ng-class="checked | conditional:'icon-check':'icon-check-empty'"></i>

Ответ 5

Хотя вы можете использовать condition && if-true-part || if-false-part -syntax в более старых версиях angular, обычный тернарный оператор condition ? true-part : false-part доступен в Angular 1.1.5 и более поздних версий.

Ответ 6

Вот он: тройной оператор добавлен в парсер angular в 1.1.5! см. журнал изменений

Вот скрипка, показывающая новый тернарный оператор, используемый в директиве ng-class.

ng-class="boolForTernary ? 'blue' : 'red'"

Ответ 7

  <body ng-app="app">
  <button type="button" ng-click="showme==true ? !showme :showme;message='Cancel Quiz'"  class="btn btn-default">{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}</button>
    <div ng-show="showme" class="panel panel-primary col-sm-4" style="margin-left:250px;">
      <div class="panel-heading">Take Quiz</div>
      <div class="form-group col-sm-8 form-inline" style="margin-top: 30px;margin-bottom: 30px;">

        <button type="button" class="btn btn-default">Start Quiz</button>
      </div>
    </div>
  </body>

Кнопка переключает и изменяет заголовок кнопки и показывает/скрывает панель div. См. Plunkr