Question

为什么Button没有禁用？

＆＃13;

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

＆＃13;

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

＆＃13;

我是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"

请查看此Fiddle以获取完整的代码＆amp; 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:''};
});

这是你期待的吗？

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

2 个答案: