ng-disabled並未禁用Angular JS中的按鈕

爲什麼Button未禁用？ng-disabled並未禁用Angular JS中的按鈕

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> \t 
 
    </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>

我在角JS是新的，我試圖做一個簡單的登錄表單，如果登錄成功會顯示其他形式，如果沒有，登錄表單會被擱置。任何人都可以幫助我嗎？我需要基本的教程。

來源

2015-02-08 userit1985

這裏是'代碼LoginAppCtrl'添加它的代碼.. – 2015-02-08 11:24:00

還沒在我的應用程序工作 http://jsfiddle.net/1urcz8r3/ 而且我在哪裏設置哪些表格將被顯示時成功登錄並且登錄表單將保持失敗？謝謝 – userit1985 2015-02-08 14:11:39

失效按鈕功能可以以基於在文本框中值兩種方式

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

這是你期待？

來源

2015-02-08 11:02:00 Rajeshwar

你在你的代碼的幾個誤區：

第一個是，你宣佈你的模塊爲主要應用：angular.module('mainApp', []);但你正在做ng-app="MTApp"。您需要使用您聲明的應用程序，這意味着它需要是ng-app="mainApp"。

控制器聲明和ng-controller一樣，它需要是相同的。

第二期是，如果request是一個對象，你應該在你的控制器啓動它：

$scope.request = {};

第三個問題是，你需要檢查undefined爲好，不只是一個空字符串：

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

看這個Fiddle一個完整的代碼& HTML。

來源

2015-02-08 11:02:39

我完成了你的寫作。 main.js \t var MEControllers = angular.module（'MEControllers'，[]）; \t MEControllers.controller（ 'LoginAppCtrl'，函數（$範圍）{ \t $ scope.form = { \t登錄： '' \t}; \t $ scope.request = {}; \t}）; – userit1985 2015-02-08 13:53:11

仍然沒有在我的應用程序工作 http://jsfiddle.net/1urcz8r3/ 此外，我在哪裏設置哪個表單將顯示成功登錄時，並且登錄表單將保持失敗？謝謝 – userit1985 2015-02-08 14:12:09

@ userit1985你在那裏聲明瞭2個ng-apps而不是一個，並且你有依賴性問題導致錯誤，因此沒有任何工作。 – 2015-02-08 14:56:47

ng-disabled並未禁用Angular JS中的按鈕

回答

相關問題