帶表達式的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禁用指令不起作用

回答

相關問題