我想知道在angular中是否有一种方法可以有条件地显示内容,而不是使用ng-show等。例如,在backbone.js中,我可以在模板中做一些内联内容:

<% if (myVar === "two") { %> show this<% } %>

但在angular中,我似乎仅限于显示和隐藏html标签中包装的东西

<p ng-hide="true">I'm hidden</p>
<p ng-show="true">I'm shown</p>

在angular中,推荐使用什么方式有条件地显示和隐藏内联内容,只使用{{}}而不是将内容包装在html标签中?


当前回答

检查一个变量的内容并有一个默认文本,你可以使用:

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

其他回答

当ng-class不能使用时,我使用以下命令有条件地设置类attr(例如在样式化SVG时):

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

同样的方法也适用于其他属性类型。

(我认为你需要使用最新的不稳定Angular才能使用ng-attr-,我目前使用的是1.1.4)

我已经发表了一篇关于AngularJS+SVG的文章,讨论了这个问题和相关问题。http://www.codeproject.com/Articles/709340/Implementing-a-Flowchart-with-SVG-and-AngularJS

有成千上万种方法可以剥这只猫的皮。我知道你特别问的是between{{}},但对于来到这里的其他人,我认为有必要展示一些其他选项。

函数在你的$作用域(在我看来,这是你在大多数情况下最好的选择):

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

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

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

当然是Ng-show和ng-hide:

 <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>

就我个人而言,在大多数情况下,我会在我的作用域上使用一个函数,它使标记非常干净,而且实现起来又快又容易。除非,也就是说,你要一遍又一遍地做同样的事情,在这种情况下,我会听从Bertrand的建议,根据具体情况创建一个过滤器或指令。

一如既往,最重要的是您的解决方案易于维护,并且希望是可测试的。这完全取决于你的具体情况。

Angular UI库有内置的指令UI -if,用于模板/视图中的条件,直到Angular UI 1.1.4

例子: 在Angular UI中支持到UI 1.1.4

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

ng-如果在1.1.4之后的所有angular版本中都可用

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

如果你在数组变量中有任何数据,那么只有div会出现

我把我的也加入其中:

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

它只计算一次if语句,不添加任何监视监听器,但是你可以添加一个额外的属性到包含set-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');
              });
            }
          }
        };
      }
    };
  });

检查一个变量的内容并有一个默认文本,你可以使用:

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