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

发布时间：2020-12-17 08:11:56 所属栏目：安全来源：网络整理

导读：用户故事：当新用户单击“新建用户”复选框并接受“条件和条件”单选按钮时，应启用“注册”按钮。我在angularJS中的代码不工作。注册按钮保持禁用。想知道出了什么问题？ !DOCTYPE htmlhtml ng-apphead script src="lib/angular/angular.min.js"/script/he

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

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

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

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

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

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

下面发表了一个评论，询问如何使用{{…}}以及何时使用带有指定ng- *指令的裸露表达式。不幸的是，隐藏在可以揭示该信息的指令中的语法线索。查看the documentation将是找到这些信息的最快方式。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!