当前位置: 首页 > 面试题库 >

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

詹斌蔚
2023-03-14
问题内容

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

我在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-*指令以及何时使用裸表达式。不幸的是,指令中没有隐藏可以揭示该信息的语法线索。查看文档可能是找出此信息的最快方法。



 类似资料:
  • 我尝试用下面的正则表达式做一个简单的文件名匹配,我测试了从这个为示例文件名工作 当我在<code>find</code>的<code>-regex</code<标志中结合这一点时 该命令未标识路径中存在的文件(例如 )。我知道此中有许多现有的正则表达式类型,但我意识到我的类型是 的并尝试如下, 仍然没有结果。我搜索了一些类似的此类问题,但它们涉及给出错误的正则表达式,导致找不到文件。就我而言,尽管

  • 问题内容: 假设我有一本书的书名用 ElasticSearch 索引如下: }’ 例如,我有一本书叫。 以下代码(搜索)可以很好地返回书中: 但是以下代码(搜索)没有: 我试图用或替换空格,但是它也不起作用。 我认为标题以()分隔,因此找不到。 如何要求Elasticsearch在完整标题中搜索regexp? 问题答案: Elasticsearch会将正则表达式应用于令牌生成器针对该字段生成的术语

  • 问题内容: 尝试将指令添加到具有动态ID的输入时,链接方法未正确绑定到该对象。给定以下jsfiddle或html: 和js: 我在控制台调试器上看到的是,当链接被调用时,其ID实际上显示为“ datepicker-{{{id}}””而不是“ datepicker-7”。 有办法强迫这种情况发生吗?实施此方法的更好方法? 更新 :应该已经澄清。单击日期选择器会显示出来,但是单击日期不起作用。我收到错

  • 问题内容: 我有一个Dockerfile,我正在将其安装在一起以安装Vanilla python环境(稍后将在其中安装应用程序)。 构建运行正常,直到最后一行,我得到以下异常: 如果我进入该目录(只是为了测试是否已完成前面的步骤),我可以看到文件按预期存在: 如果我尝试仅运行命令,则会收到与上述相同的“未找到”错误。但是,如果我运行交互式shell会话,则源代码确实可以工作: 我可以从这里运行脚本

  • 我有一个Dockerfile,我将把它放在一起安装一个vanilla python环境(我将在其中安装一个应用程序,但以后再安装)。 构建运行正常,直到最后一行,我得到以下异常: 从Dockerfile运行指令运行shell脚本的最佳方法是什么来解决这个问题(我运行Ubuntu12.04LTS的默认基本映像)。

  • 我想测试用户是否在模式 ##-#- 中输入了任何字符或数字#### 我的表达式是 ^(\w){4}-(\w){2}-(\w){3}-(\w){4}$,似乎在联机测试人员中有效,但在我的验证表达式中不起作用! 有什么想法吗? 这是我的代码(getComponentValye是我自己获取值的函数)…