带有表达式的AngularJS ng-disabled指令不起作用

一尘不染

带有表达式的AngularJS ng-disabled指令不起作用

angularjs

用户故事：当新用户单击“新用户”复选框并接受“条款和条件”单选按钮时，应启用“注册”按钮。

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

阅读 248

2020-07-04

共1个答案

一尘不染

该ng-disabled表达式在当前范围内进行评估。因此，您只需要以下内容，而无需使用进行任何附加插值{{..}}：

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

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

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

下面发布了一条评论，询问如何推理何时使用{{...}}给定ng-*指令以及何时使用裸表达式。不幸的是，指令中没有隐藏可以揭示该信息的语法线索。查看文档可能是找出此信息的最快方法。

2020-07-04