带表达式的AngularJS ng禁用指令不起作用

用户故事：当新用户单击新用户复选框并接受TermsAndConditions单选按钮时，应启用注册按钮。带表达式的AngularJS ng禁用指令不起作用

我在angularJS中的代码不工作。注册按钮保持禁用状态。想知道哪里出了问题？

<!DOCTYPE html> 
<html ng-app> 
<head> 
    <script src="lib/angular/angular.min.js"></script> 
</head> 
<body> 

<div ng-controller="LoginCtrl"> 
    <div> 
     <label>New User?</label> 
     <input type="checkbox" ng-model="isNewUser"/> 
    </div> 

    <div ng-show="isNewUser"> 
     <label>Accept Terms and Conditions</label> 
     <input type="radio" value="yes" name="tnc" ng-model="tnc"/><label>Yes</label> 
     <input type="radio" value="no" name="tnc" ng-model="tnc" /><label>No</label> 
    </div> 

    <div> 
     <input type="submit" value="Login" ng-disabled="isNewUser" > 
     <input type="submit" value="Register" ng-show="isNewUser" ng-disabled="hasAcceptedTnC('{{tnc}}')"> 
    </div> 
</div> 
</body> 

<script language="JavaScript"> 
var LoginCtrl = function ($scope) { 
     $scope.isNewUser = false; 
     $scope.tnc = "no"; 

     $scope.hasAcceptedTnC = function(value) { 
      //alert(value); 
      return "yes"==value; 
     }; 
    } 
</script> 
</html>

来源

2013-12-11 karthiks

ng-disabled表达式在本范围内被评估。因此，你应该只需要没有任何多余的插值以下与{{..}}：我添加了一个!，因为你可能要禁用按钮，如果用户有不接受TNC

<input type="submit" 
      value="Register" 
      ng-show="isNewUser" 
      ng-disabled="!hasAcceptedTnC(tnc)">

注意。

工作演示：http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

一个注释下面贴询问如何推理时使用{{...}}以及何时使用裸表达与给定ng-*指令。不幸的是，在指令中没有隐含的语法线索可以揭示这些信息。看看the documentation将成为找出这些信息的最快方法。

来源

2013-12-11 12:10:41

意味着如果在NG-残疾人使用的布尔变量是在父范围内，不会工作是什么呢？ –

@KuganKumar除非在它们之间有一个'isolated'范围指令，在范围上定义的值（至少在读取时）会无缝地继承到任何子范围。 –

-11

我试着从上面的解决方案中获得帮助，但没有奏效。所以我找到了另一个解通过在该元素的CSS中添加以下代码，解决了我的问题 pointer-events：none;

所以一般： -

element[disabled]{ 
    pointer-events: none; 
}

来源

2015-02-20 16:26:32

这违背了ng-disabled的概念，这对你来说更好。 – 2015-08-20 15:36:07

带表达式的AngularJS ng禁用指令不起作用

回答

相关问题