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:''};
});

這是您所期望的嗎？