angular.js中的内联条件

我想知道在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标签中?

当前回答

在Angular 1.5.1中也是如此(因为应用程序依赖于其他MEAN堆栈依赖，所以我目前没有使用1.6.4)

这为我工作像OP说{{myVar === "二" ?"这是真的":"这是假的"}}

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

其他回答

在Angular 1.5.1中也是如此(因为应用程序依赖于其他MEAN堆栈依赖，所以我目前没有使用1.6.4)

这为我工作像OP说{{myVar === "二" ?"这是真的":"这是假的"}}

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

编辑:2Toad下面的答案就是你想要的!给那个东西点赞

如果你使用的是Angular <= 1.1.4，那么这个答案是这样的:

还有一个答案。我发布了一个单独的答案，因为它更像是一个解决方案的“精确”尝试，而不是一个可能的解决方案列表:

下面是一个过滤器，它将执行“立即if”(又名iif):

app.filter('iif', function () {
   return function(input, trueValue, falseValue) {
        return input ? trueValue : falseValue;
   };
});

并且可以这样使用:

{{foo == "bar" | iif : "it's true" : "no, it's not"}}

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

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

即使在异国他乡也适用:

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

当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

推荐文章