带表达式的AngularJS ng禁用指令无效

User Story: When a new user clicks the New User checkbox and accepts the TermsAndConditions radio button, the Register button should be enabled.

用户故事:当新用户单击new User复选框并接受TermsAndConditions单选按钮时，应该启用Register按钮。

My code in angularJS isn't working. The Register button remains disabled. Wondering what went wrong?

我在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>

2 个解决方案

#1

The ng-disabled expression is evaluated in the present scope. Hence, you should only need the following without any extra interpolation with {{..}}:

在当前范围内对禁用了ng的表达式进行评估。因此，您应该只需要以下内容，而不需要使用{..}进行任何额外的插补:

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

Note that I added a ! since you probably want the button disabled if the user has not accepted the TnC.

注意我添加了a !因为如果用户不接受TnC，您可能希望禁用该按钮。

Working demo: http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview

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

A comment was posted below asking how to reason about when to use {{...}} and when to use bare expression with a given ng-* directive. Unfortunately, there is no syntactical clue hidden in the directives which can reveal that information. Looking at the documentation will turn out to be fastest way to find out this information.

下面发布了一条评论，询问如何推断何时使用{…当使用一个给定的ng-*指令时，使用裸表达式。不幸的是，在能够揭示信息的指令中没有隐藏的语法线索。查看文档将是发现这些信息的最快方法。

#2

-11

I tried taking help from the above solution but it didn't work. So I found another solution. By adding the following code in the CSS for that element, solves my problem pointer-events: none;

我试图从上面的解决方案中得到帮助，但没有成功。所以我找到了另一个解。通过在CSS中为该元素添加以下代码，解决了我的问题pointerevents: none;

So in general :-

总之:-

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

#1