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

标签 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>

最佳答案

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将成为查找此信息的最快方法。

关于带有表达式的 AngularJS ng-disabled 指令不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20518691/

相关文章:

javascript - 指令未在 <Enter> 按键上触发

javascript - 在 Angular 中刷新指令

javascript - 整页背景仅在主页/索引页上

javascript - 在 AngularJS 中设置和检索 $routeParams 中的自定义对象

javascript - 使用 Controller as 语法时如何从父指令继承属性?

session - 如何在 AngularJS 应用程序中保存 session 数据?

Angularjs - Charts.js : Same chart element doesn't redraw on other view

javascript - Angular 新手: non-trivial form validation?

javascript - 普通 JS 到 Angular 指令;创建使用 Angular Directive(指令)的 DOM 元素

javascript - 来自 Controller 的 Angular 对象未在 html 中显示