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

Question

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

kar*_*iks 24 angularjs angularjs-directive angularjs-scope

用户素材:当新用户单击"新用户"复选框并接受"条款和条件"单选按钮时,应启用"注册"按钮.

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

mus*_*_ut 46

在ng-disabled本范围表达式.因此,您应该只需要以下内容而无需任何额外的插值{{..}}:

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

Run Code Online (Sandbox Code Playgroud)

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

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

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

归档时间：	12 年，5 月前
查看次数：	91603 次
最近记录：	6 年，11 月前