angularjs if заявления?

Question

Итак, я просматриваю руководство по AngularJS:

У меня есть массив, определенный в контроллере, и я возвращаю разные точки в массиве, вызывая, когда я прохожу через ng-repeat {{feature.name}} {{feature.description}}

Чего я не понимаю, так это скажем, у меня есть третья точка в массиве, называемая «важность», и это число от 1 до 10.Я не хочу отображать это число в html, но я хочу применить другой цвет к функции, если это число «важности» в массиве равно 10 против 1.

Итак, как мне написать оператор if, чтобы сделать это:

то есть

<p style="**insert if statement: {{if feature.importance == 10}} color:red; {{/if}} **">{{feature.description}}</p>

понятия не имею, правильно ли это, но это то, что я хочу сделать

Answer 1

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

angular.module('setIf',[]).directive('setIf',function () {
    return {
      transclude: 'element',
      priority: 1000,
      terminal: true,
      restrict: 'A',
      compile: function (element, attr, linker) {
        return function (scope, iterStartElement, attr) {
          if(attr.waitFor) {
            var wait = scope.$watch(attr.waitFor,function(nv,ov){
              if(nv) {
                build();
                wait();
              }
            });
          } else {
            build();
          }

          function build() {
            iterStartElement[0].doNotMove = true;
            var expression = attr.setIf;
            var value = scope.$eval(expression);
            if (value) {
              linker(scope, function (clone) {
                iterStartElement.after(clone);
                clone.removeAttr('set-if');
                clone.removeAttr('wait-for');
              });
            }
          }
        };
      }
    };
  });

.

Эта вторая - это директива, которая условно применяет атрибуты для элементов только один раз без наблюдателей, прослушиваний:

I.e.

<div set-attr="{ data-id : post.id, data-name : { value : post.name, condition : post.name != 'FOO' } }"></div>

angular.module('setAttr',[]).directive('setAttr', function() {
  return {
    restrict: 'A',
    priority: 100,
    link: function(scope,elem,attrs) {
      if(attrs.setAttr.indexOf('{') != -1 && attrs.setAttr.indexOf('}') != -1) {
      //you could just angular.isObject(scope.$eval(attrs.setAttr)) for the above but I needed it this way
        var data = scope.$eval(attrs.setAttr);

        angular.forEach(data, function(v,k){

          if(angular.isObject(v)) {
            if(v.value && v.condition) {
                elem.attr(k,v.value);
                elem.removeAttr('set-attr');
            }
          } else {
            elem.attr(k,v);
            elem.removeAttr('set-attr');
          }
        });
      }
    }
  }
});

.

Конечно, вы можете использовать динамические версии, встроенные в угловые:

<div ng-class="{ 'myclass' : item.iscool }"></div>

.

Вы также можете использовать новый NG-IF, добавленные Angularjs, которые в основном заменяет UI-IF, если создано командой Angularui, эти условно добавляют и удаляют вещи из DOM и добавляют прослушиватели по наблюдениям, чтобы сохранить оценку:

<div ng-if="item.iscool"></div>

.

Answer 2

Я не думаю, что есть if заявление имеется.Для вашего стиля, ng-class может быть использован.

<p ng-class="{important: feature.importance == 10 }">

ng-switch это тоже удобно.

-- обновлять --

Взгляни на:https://stackoverflow.com/a/18021855/1238847

angular1.2.0RC, похоже, поддерживает ng-if.

Answer 3

На самом деле есть тройной оператор в угловой 1.2.0.

<p style="{{feature.importance == 10 ? 'color:red' : ''}}">{{feature.description}}</p>

.

Answer 4

Я думаю, что ответ нуждается в обновлении.

Раньше вы могли использовать директиву ngIf из проекта AngularUI (код здесь если вы все еще хотите его загрузить), плохая новость в том, что он больше не поддерживается.

Хорошей новостью является то, что он был добавлен в официальный репозиторий AngularJS (нестабильная ветвь) и скоро будет доступен в стабильный.

<div ng-if="something"> Foo bar </div>

Не будет просто скрывать DIV элемент, но также удалите его из DOM (если что-то неверно).

Answer 5

NG-Class - это, вероятно, лучший ответ на ваш вопрос, но Angulului имеет «если» Директива:

http://angular-ui.github.com/

Поиск: Удалите элементы из дома полностью вместо того, чтобы просто скрывать его.

Я использовал «UI-IF», чтобы решить, следует ли я сделать значение данных в качестве метки или вход, относительно текущего месяца:

<tbody id="allocationTableBody">
    <tr ng-repeat="a in data.allocations">
        <td>{{a.monthAbrv}}</td>
        <td ui-if="$index < currentMonth">{{a.amounts[0]}}</td>
    </tr>
</tbody>

.

Answer 6

В случае, когда ваш приоритет будет меткой, вы можете создать фильтр переключателя для использования внутри класса NG, как показано в предыдущем, так что ответа: https://stackovflow.com/a/8309832/1036025 (для кода фильтра переключателя)

<p ng-class="feature.importance|switch:{'Urgent':'red', 'Warning': 'orange', 'Normal': 'green'}">...</p>

.

Answer 7

Вы также можете попробовать эту строку кода ниже

<div class="{{is_foo && foo.bar}}">

.

Что показывает foo.bar, если iS_foo true.

Answer 8

Что также работает:

<span>{{ varWithValue || 'If empty use this string' }}</span> 

.