我想知道在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标签中?
当前回答
有成千上万种方法可以剥这只猫的皮。我知道你特别问的是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的建议，根据具体情况创建一个过滤器或指令。
一如既往，最重要的是您的解决方案易于维护，并且希望是可测试的。这完全取决于你的具体情况。
其他回答
有成千上万种方法可以剥这只猫的皮。我知道你特别问的是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 1.5.1中也是如此(因为应用程序依赖于其他MEAN堆栈依赖，所以我目前没有使用1.6.4)
这为我工作像OP说{{myVar === "二" ?"这是真的":"这是假的"}}
{{vm.StateName === "AA" ? "ALL" : vm.StateName}}
当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
Angular 1.1.5增加了对三元操作符的支持:
{{myVar === "two" ? "it's true" : "it's false"}}
检查一个变量的内容并有一个默认文本，你可以使用:
<span>{{myVar || 'Text'}}</span>
