用户故事:当新用户单击“新用户”复选框并接受“条款和条件”单选按钮时,应启用“注册”按钮。
我在 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/