如何与你的angularjs三元(在模板)？
这将是很好的HTML属性中使用的一些类(的风格)而创建和调用的功能控制器。
我用过滤器过滤这个
更新：Angular 1.1.5添加了一个三元运算符，因此现在我们可以简单地编写
如果使用的是早期版本的Angular，则有两种选择：
(condition && result_if_true || !condition && result_if_false)
{true: 'result_if_true', false: 'result_if_false'}[condition]
项目2。上面创建了一个具有两个属性的对象。数组语法用于选择名为true的属性或名为false的属性，并返回关联的值。
例如。，
...or
...$first在第一个元素的ng repeat中设置为true，因此上面的内容只会在第一次循环中应用类'myclass1'和'myclass2'。
对于ng类，有一种更简单的方法：ng类采用一个表达式，该表达式必须计算为以下值之一：
以空格分隔的类名字符串
类名数组
类名称到布尔值的映射/对象。
上面给出了一个1)的例子。下面是3个例子，我认为它读起来更好：
...第一次通过ng重复循环，添加了类myclass。第三次通过($index从0开始)，类anotherclass被添加。
ng-style接受一个表达式，该表达式的值必须为css-style名称到css值的映射/对象。例如。，
...如果可以，我会再次投票给你更新问题！
我会处理的，@narretz.
在对象键访问示例中，可以跳过"false"键，因为它无论如何都是空字符串。
警告词1.1.5目前不稳定。
如果模型更新时条件发生了变化怎么办？我想更新ng-style，但它似乎只在第一次呈现元素时进行评估。(此处为角形Noob)
@Hartleybrody，您可能正在更改Angular的"外部"模型，因此需要调用$Apply()以使Angular重新评估ng样式表达式。
有点太晚了，但是有人知道一种可以用来让这些模板不允许这些东西的过梁吗？(例如，将复杂性设置为1或2或某种类型)
这只适用于课堂吗？例如，UI SREF呢？
更新：Angular 1.1.5添加了一个三元运算符，此答案仅适用于1.1.5之前的版本。有关1.1.5及更高版本，请参阅当前接受的答案。
角度1.1.5之前：
AngularJS中的三元形式是：
((condition) && (answer if true) || (answer if false))
例如：
或：
<<奇怪的。这不是很直观。我想知道为什么它是这样实现的。
三元从来没有实现过，但这只是使用二元运算符的工作方式。
@幸运的是，AngularJS促进了可测试性。模板不应包含任何逻辑。模板中的三元运算符应重构为对控制器的函数调用，以获得更好的可测试性。
上面的例子应该使用ng样式和ng类吗？(我不确定何时需要使用)。
@Marcellonuccio，+1是有意义的。
@标记，如果要使用ng样式，则表达式需要eval到键为css样式名且值为css值的对象。例如，ng-style="颜色：$location.path()='/page2'&；&；'fff''000'"。我觉得这读起来更好一点，因为它更容易告诉你正在设置"颜色"。
@Marcellonuccio你能详细解释一下吗？我想根据一个布尔属性打印CSS clases，如何将其重构为控制器？(我知道，我是个笨蛋)
@arg20应该使用ngclass指令(或ngclasseven和ngclassodd)。然后把选择CSS类的所有逻辑放到控制器中。这更容易自动测试。
@Marcellonuccio但是在模型上输入类名是个好主意吗？它们属于视图，模型不应该知道视图使用的CSS类。最好的方法是使用模型中的布尔属性，比如ng-class="someboolean: 'myCssClass'"。
@arg20我说把它放在控制器里，而不是模型里。这不应该是个问题。然而，文档中说："计算结果可以是一个表示空格分隔的类名的字符串、一个数组，或者类名到布尔值的映射。"这意味着您可以使用"css class:someBoolCheck()"作为表达式，即您将CSS类放在视图中，并将逻辑放在控制器中。请看这个JSfiddle示例。
很完美。正是我要找的！谢谢！
对于角度模板中的文本(userType是$scope的属性，如$scope.usertype)：
{{userType=='admin' ? 'Edit' : 'Show'}}
到目前为止，我们都发现版本1.1.5在$parse函数中有一个适当的三元，所以只需使用这个答案作为过滤器的例子：
angular.module('myApp.filters', [])
.filter('conditional', function() {
return function(condition, ifTrue, ifFalse) {
return condition ? ifTrue : ifFalse;
};
});
然后将其用作
我是为三元运算符提这个问题的，但最后我用了一个过滤器，感觉很好…= D
这里是：在1.1.5中向角度分析器添加了三元运算符！查看更改日志
这里是一个小提琴，显示了在ng类指令中使用的新三元运算符。
ng-class="boolForTernary ? 'blue' : 'red'"
虽然您可以在早期版本的Angular中使用condition && if-true-part || if-false-part语法，但通常的三元运算符condition ? true-part : false-part在Angular 1.1.5和更高版本中可用。
{{showme==true ? 'Cancel Quiz': 'Take a Quiz'}}
Take Quiz
Start Quiz
按钮切换和更改按钮标题以及显示/隐藏分区面板。见鬼
扫一扫
3766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
