встроенные условные обозначения в угловой.js

Угловое 1.1.5 добавлена поддержка тернарных операторов:

{{myVar === "two" ? "it's true" : "it's false"}}

тысячи способов, чтобы кожа Этот кот. Я понимаю, что вы спрашиваете о Между {{}} конкретно, но для других, которые приходят сюда, я думаю, что стоит показать некоторые другие варианты.

функция на вашем $ scope (ИМО, это ваш лучший выбор в большинстве случаев):

  app.controller('MyCtrl', function($scope) {
      $scope.foo = 1;

      $scope.showSomething = function(input) {
           return input == 1 ? 'Foo' : 'Bar';
      };
   });

 <span>{{showSomething(foo)}}</span>

---

НГ-шоу и НГ-скрыть, конечно:

 <span ng-show="foo == 1">Foo</span><span ng-hide="foo == 1">Bar</span>

---

ngSwitch

 <div ng-switch on="foo">
   <span ng-switch-when="1">Foo</span>
   <span ng-switch-when="2">Bar</span>
   <span ng-switch-default>What?</span>
 </div>

---

пользовательский фильтр как Bertrand предложенный. (это ваш лучший выбор, если вы должны делать то же самое снова и снова)

app.filter('myFilter', function() {
   return function(input) {
     return input == 1 ? 'Foo' : 'Bar';
   }
}

{{foo | myFilter}}

---

или пользовательская директива:

app.directive('myDirective', function() {
   return {
     restrict: 'E',
     replace: true,
     link: function(scope, elem, attrs) {
       scope.$watch(attrs.value, function(v) {
          elem.text(v == 1 ? 'Foo': 'Bar');
       });
     }
   };
});


<my-directive value="foo"></my-directive>

лично, в большинстве случаев я бы пошел с функцией на моей области, он держит разметку довольно чистой, и это быстро и легко реализовать. Если, конечно, вы не собираетесь делать то же самое снова и снова, и в этом случае я бы пошел с предложением Бертрана и создал фильтр или, возможно, директиву, в зависимости от обстоятельств.

как всегда самое главное, что ваше решение легко поддерживать, и, надеюсь, можно проверить. И это будет полностью зависеть от вашей конкретной ситуации.

Я использую следующее, чтобы условно установить класс attr, когда ng-class не может быть использован (например, при стилизации SVG):

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

тот же подход должен работать для других типов атрибутов.

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

я опубликовал статью о работе с AngularJS + SVG, в которой говорится об этом и связанных с этим вопросах. http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

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

<span>{{myVar || 'Text'}}</span>

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

сначала вы можете попробовать ngSwitch и второй возможный способ будет создавать у вас собственный фильтр. Вероятно, ngSwitch-это правильный подход, но если вы хотите скрыть или показать встроенное содержимое, просто используя {{}} фильтр-это путь.

здесь скрипка С простым фильтром в качестве примера.

<div ng-app="exapleOfFilter">
  <div ng-controller="Ctrl">
    <input ng-model="greeting" type="greeting">
      <br><br>
      <h1>{{greeting|isHello}}</h1>
  </div>
</div>

angular.module('exapleOfFilter', []).
  filter('isHello', function() {
    return function(input) {
      // conditional you want to apply
      if (input === 'hello') {
        return input;
      }
      return '';
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

библиотека угловой пользовательский интерфейс имеет встроенные директивы пользовательского интерфейса-если условие в шаблон/просмотров до угловой пользовательского интерфейса 1.1.4

пример: Поддержку в угловой пользовательского интерфейса пользовательского интерфейса до 1.1.4

<div ui-if="array.length>0"></div>

ng-если доступно во всех угловых версиях после 1.1.4

<div ng-if="array.length>0"></div>

Если у вас есть какие-либо данные в переменной массива, то появится только div

Так что с угловой 1.5.1 (если бы существовала зависимость приложения от некоторых других средних зависимостей стека, поэтому я в настоящее время не использую 1.6.4 )

это работает для меня, как ОП говорил {{myVar === "two" ? "it's true" : "it's false"}}

{{vm.StateName === "AA" ? "ALL" : vm.StateName}}

работает даже в самых экзотических ситуациях:

<br ng-show="myCondition == true" />

Если вы хотите отобразить "нет", когда значение" 0", вы можете использовать как:

<span> {{ $scope.amount === "0" ?  $scope.amount : "None" }} </span>

или true false в угловой js

<span> {{ $scope.amount === "0" ?  "False" : "True" }} </span>

Я брошу свой в микс:

https://gist.github.com/btm1/6802312

это вычисляет оператор if один раз и не добавляет прослушиватель часов, но вы можете добавить дополнительный атрибут к элементу, который имеет набор-если он называется wait-for="somedata.prop " и он будет ждать, пока эти данные или свойство будут установлены, прежде чем оценивать оператор if один раз. этот дополнительный атрибут может быть очень удобен, если вы ждете данных из XHR запрос.

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');
              });
            }
          }
        };
      }
    };
  });