ng-disabled不禁用Angular JS中的按钮

Question

为什么不禁用按钮？

 var mainApp = angular.module('mainApp', []); mainApp.controller('mainController', function ($scope) { $scope.form = { login: '' }; }); 

 <form ng-controller="LoginAppCtrl as lc" ng-app="MTApp"> <div class="login"> <h1>LOG IN</h1> </div> <div> <div>User Name :</div> <div> <input type="text" name="tbUserName" required ng-model="lc.request.user"> </div> </div> <div> <div>Password :</div> <div> <input type="text" name="tbPassword" required ng-model="lc.request.password"> </div> </div> <div> <div> <button ng-click="lc.submitRequest()" ng-disabled="lc.request.user == '' || lc.request.password == '' ">Sign In</button> </div> </div> </form> 

我是Angular JS的新手，我正在尝试制作一个简单的登录表单，如果登录成功将以其他形式显示，否则，将保留登录表单。 谁能帮我？ 我需要基本的教程。

Answer 1

您的代码中有几个错误：

第一个是您将模块声明为主应用程序： angular.module('mainApp', []); 但您正在执行ng-app="MTApp" 。 您需要使用声明的应用程序，这意味着它必须是ng-app="mainApp" 。

控制器声明和ng-controller ，需要相同。

第二个问题是，如果request是一个对象，则应在控制器上启动它：

$scope.request = {};

第三个问题是，您还需要检查undefined ，而不仅仅是空字符串：

ng-disabled="!request.user || !request.password"

查看此小提琴以获得完整的代码和HTML。

Answer 2

禁用按钮功能可以通过两种方式完成

1）基于文本框中的值，与控制器对象无关。 给一些名称赋形像

<form name='form1'>
  <div>
    <div>User Name :</div>
      <input type="text" name="tbUserName" required ng-model="lc.request.user">
  </div>
  <div>
    <div>Password :</div>
      <input type="text" name="tbPassword" required ng-model="lc.request.password">
  </div>
  <div>
    <button ng-disabled="form1.$invalid">Sign In</button>
  </div>
</form>

2）基于控制器中定义的对象。

如果您的控制器中有一个对象，说$scope.user = {name:'', password:''}那么在输入框中可以使用ng-model='user.name'和ng-model = 'user.password'在提交按钮上，您可以使用ng-disabled=" user.name === '' || user.password === '' "然后，除非您填写了这两个文本框，否则提交按钮将被禁用。

<form>
  <div>
    <div>User Name :</div>
      <input type="text" name="tbUserName" required ng-model="user.name">
  </div>
  <div>
    <div>Password :</div>
      <input type="text" name="tbPassword" required ng-model="user.password">
  </div>
  <div>
    <button ng-disabled="user.name==='' || user.password===''">Sign In</button>
  </div>
</form>

控制器应该定义对象

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.user = {name:'',password:''};
});

这是您所期望的吗？