【问题标题】:Stacked Ternary Operator not functioning in Angularjs Expression堆叠三元运算符在 Angularjs 表达式中不起作用
【发布时间】:2015-04-14 17:04:40
【问题描述】:
ng-disabled="{{sroFieldStatus ? ( sroFieldStatus==2 ? true: false ):true}}"

它位于 angularJS 的 html 模板中。有时,sroFieldStatus 将成为 0、1、2 集合中的值。这个想法是 ng-disable 仅在 sroFieldStatus =1 时变为 FALSE,而不是在其 0 或 2 时变为 FALSE。

我意识到,无论sroFieldStatus 变成什么值,我所做的三元语句似乎总是被赋值为真。

我想知道我做错了什么?

谢谢

【问题讨论】:

  • 你不需要字符串插值

标签: javascript angularjs expression ternary-operator


【解决方案1】:

您不需要插值。直接使用

ng-disabled="sroFieldStatus != 1"

阅读ngDisabled文档

如果表达式为真,则元素上会设置特殊属性“disabled”

【讨论】:

  • 你的意思是ng-disabled="sroFieldStatus != 1"
  • 但是让我说如果我确实使用它,如果在任何其他情况下,整个语句中的错误是什么?
  • @Chen,您在插入值,这意味着它将初始值呈现为 HTML,并且永远不会改变。
  • @Shomz Ahhhh,所以,实际上,因为三元运算的第一级已经是'真实',所以不管它的第二级之后发生了什么,都会考虑,总是真实的?这就是你的意思吗>
  • @Chen,无论sroFieldStatus ? ( sroFieldStatus==2 ? true: false ):true 的值是多少,它都会持续存在,如果sroFieldStatus 的初始值为2,那么条件将为真并且它会持续存在
【解决方案2】:

由于没有答案澄清它 - 我会将我在评论中写的内容收集到一个答案中。

问题是您正在插入值,这意味着它将初始表达式值呈现为 HTML,并且永远不会更改,之后没有绑定,因为 ng-directives 可以评估范围对象,因此无需插入它们。

啊,原来如此,因为三元运算的第一层已经是“真”了,所以不管第二层之后的什么,都会被认为是,永远是真的?

准确地说,在您的情况下,标记呈现为:

ng-disabled="true"

当然,这永远不会改变。

如果您希望 disabled 仅在值为 1 时为 false,您可以准确地写出来,而不会进一步复杂化三元:

ng-disabled="sroFieldStatus != 1"

查看此示例以更好地了解插值和非插值版本之间的区别:

angular.module('app', [])
.controller('Ctrl', function($scope, $timeout){
  $scope.flag = false;
  $timeout(function(){
    $scope.flag = true;
  }, 3000) // simulating a change after 3 secs
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="Ctrl">
    <input placeholder="regular" ng-disabled="flag" />
    <input placeholder="interpolated" ng-disabled="{{flag}}" />
  </body>

Plunker version

【讨论】:

    【解决方案3】:

    如果您使用三元运算符,请务必在冒号和问号周围放置一个空格:

    ng-disabled="{{sroFieldStatus ? ( sroFieldStatus==2 ? true : false ) : true}}"
    

    == 运算符已经返回真或假,因此可以缩短为:

    ng-disabled="{{sroFieldStatus ? (sroFieldStatus == 2 ) : true}}"
    

    【讨论】:

    • 我只是尝试了缩短的方法,但它似乎并没有真正起作用,我想给你解决方案,但我现在不确定它是否正确。您能帮我弄清楚它仍然无法正常工作的原因吗?
    • 空格没有区别(cond?true:false 工作正常,虽然看起来很丑),而且你的回答在任何意义上都不能回答问题。
    猜你喜欢
    • 2013-06-20
    • 2018-05-01
    • 2011-07-11
    • 1970-01-01
    • 2016-03-30
    • 2014-11-13
    相关资源
    最近更新 更多