代码之家 › 专栏 › 技术社区 › Edward Tanguay

为什么ng禁用中的表达式不起作用?

angularjs

Edward Tanguay · 技术社区 · 10 年前

这是什么:

ng-disabled="login == ''"

当输入字段 login 是否为空?

<html ng-app="mainApp">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

    </head>    
    <body ng-controller="mainController">

        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    LOGIN
                </div>
                <div class="panel-body">
                    <form>
                        <div class="form-group">
                            <label for="login">Login</label>
                            <input type="text" class="form-control" id="login" ng-model="login">
                        </div>
                        <div class="form-group">
                            <label for="inputPassword">Passowrd</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <button type="submit" ng-disabled="login == ''"  class="btn btn-primary">Login</button>
                    </form>
                </div>
            </div>
        </div>

        <script>
                            var mainApp = angular.module('mainApp', []);

                            mainApp.controller('mainController', function ($scope) {
                            });
        </script>
    </body>
</html>

1 回复 | 直到 10 年前

dcodesmith 10 年前

在控制器中创建一个保存每个模型属性/字段的表单对象,然后检查该字段( login )equals和空字符串。

...
<input type="text" class="form-control" id="login" ng-model="form.login">
...
<button type="submit" ng-disabled="form.login === ''" class="btn btn-primary">Login</button>
....

控制器

mainApp.controller('mainController', function ($scope) {
    $scope.form = {
        login: ''
    }
});

JSFIDDLE

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

3 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

3 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

3 年前

jieunbi · 按日期排序数组(最新优先)

3 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

3 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前