带有表达式的 AngularJS ng-disabled 指令不起作用
[英] AngularJS ng-disabled directive with expression is not working
本文介绍了带有表达式的 AngularJS ng-disabled 指令不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
用户故事:当新用户单击新用户"复选框并接受条款和条件"单选按钮时，应启用注册"按钮.
我在 angularJS 中的代码不起作用.注册按钮保持禁用状态.想知道出了什么问题?
<头><script src="lib/angular/angular.min.js"></script><身体><div ng-controller="LoginCtrl"><div><label>新用户?</label><input type="checkbox" ng-model="isNewUser"/> <div ng-show="isNewUser"><label>接受条款和条件</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><input type="submit" value="登录" ng-disabled="isNewUser" ><input type="submit" value="Register" ng-show="isNewUser" ng-disabled="hasAcceptedTnC('{{tnc}}')">
<脚本语言=JavaScript">var LoginCtrl = function ($scope) {$scope.isNewUser = false;$scope.tnc = "没有";$scope.hasAcceptedTnC = 函数(值){//警报(值)；返回是"==值；};}</html>
解决方案
ng-disabled 表达式在当前范围内计算.因此，您应该只需要以下内容，而无需使用 {{..}} 进行任何额外的插值:
请注意，我添加了一个 !，因为如果用户不 接受 TnC，您可能希望禁用该按钮.
工作演示:http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview
<小时>
下面发布了一条评论，询问如何推理何时使用 {{...}} 以及何时使用带有给定 ng-* 指令的裸表达式.不幸的是，指令中没有隐藏可以揭示该信息的句法线索.查看文档 将证明是查找此信息的最快方法.
User Story: When a new user clicks the New User checkbox and accepts the TermsAndConditions radio button, the Register button should be enabled.
My code in angularJS isn't working. The Register button remains disabled. Wondering what went wrong?
<!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>
解决方案
The ng-disabled expression is evaluated in the present scope. Hence, you should only need the following without any extra interpolation with {{..}}:
<input type="submit"
value="Register"
ng-show="isNewUser"
ng-disabled="!hasAcceptedTnC(tnc)">
Note that I added a ! since you probably want the button disabled if the user has not accepted the TnC.
Working demo: http://plnkr.co/edit/95UiO4Rd2IMh8T1KjSQK?p=preview
A comment was posted below asking how to reason about when to use {{...}} and when to use bare expression with a given ng-* directive. Unfortunately, there is no syntactical clue hidden in the directives which can reveal that information. Looking at the documentation will turn out to be fastest way to find out this information.
这篇关于带有表达式的 AngularJS ng-disabled 指令不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
