angular.js中的内联条件

如果我没理解错的话，我想你有两种方法。

首先，你可以尝试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';
}

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

函数在$scope (在我看来，这是你在大多数情况下最好的选择):上

  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.1.4，那么这个答案是这样的:

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

这里有一个过滤器，将执行“立即如果”;(又名iif):

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

并且可以这样使用:

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

当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 UI库有内置的指令UI -if，用于模板/视图中的条件，直到Angular 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');
});
}
}
};
}
};
});

角1.1.5增加了对三元操作符的支持:

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

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

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

即使在异国他乡也适用:

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

在Angular 1.5.1中也是如此(对一些其他MEAN堆栈依赖的现有应用程序依赖是我目前不使用1.6.4的原因)

这为我工作，就像OP说\{\{myVar === "two" ? "it's true" : "it's false"}}

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

如果你想在值为“0”时显示“None”，你可以使用as:

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

或者在angular js中为true false

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

最近的角度应该是6+。你有一个带有else条件的ng-template连接到一个标签标识符:

<div *ngIf="myVar else myVarNo">Yes</div>
<ng-template #myVarNo><div>No</div></ng-template>