Question

用户素材：当新用户点击“新用户”复选框并接受“条款和条件”单选按钮时，应启用“注册”按钮。

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

Answer 1

在当前范围内评估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将成为查找此信息的最快方式。

Answer 2

if ($scope.Data.length > 0)
  $scope.isNewUser = true;
else $scope.isNewUser = false;

<md-button class="md-raised md-primary" 
            ng-click="Search()" 
            ng-disabled="!isNewUser" 
            aria-label="pause">Assign </md-button>

Answer 3

我试过从上面的解决方案中获得帮助，但它没有用。所以我找到了另一个解决方通过在该元素的CSS中添加以下代码，解决了我的问题 pointer-events：none;

一般来说： -

 element[disabled]{
  pointer-events: none;
 }

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

3 个答案: