我有一個按鈕，需要根據用戶是否已在html頁面中輸入值來控制。從angular.js中的控制器啓用禁用按鈕

我已經將模型綁定到文本字段，並在$ scope上設置了禁用變量，該變量在輸入字段模型的值上啓用/禁用。

下面是HTML

<!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first"> 
    <br> 
    <input type="text" ng-model='last'>

這裏是correponding角控制器。

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first || !$scope.last; 

})

它運行的第一次，但後來不修改的基礎上後來的修改。

根據我的理解，angular使用雙向綁定，所以如果我在視圖上修改任何內容，它應該反映在控制器上，然後控制器上任何更改都應該反映在視圖上。我在這裏做什麼錯？我不想使用表格
我想避免文本輸入字段上的onChange事件。

請參考普拉克 http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

來源

2016-11-17 Pankaj

使用ng-disabled='!first || !last'。

下面的邏輯似乎工作，至少在你Plunker：

<input type='button' value='click' ng-disabled='!first || !last'> 
<br> 
<input type="text" ng-model="first"> 
<br> 
<input type="text" ng-model='last'>

這是事實，該範圍變量$scope.first和$scope.last是雙向綁定到控制器。這意味着輸入框中的任何更改都應該自動反映這些變量的狀態。但是disabled是一個計算量，在控制器加載時計算一次，但不是在代碼中再次計算。因此，disabled似乎始終是true，即使在兩個輸入框中都輸入了文本之後。

Plunker

來源

2016-11-17 07:46:26

感謝給予適當的解釋。我確信ng-change將按照其他答案中的建議工作，但這將是我會尋找的最後一招。 – Pankaj

@Pankaj如果你需要在變化事件上做其他事情，那麼你可以考慮與Sajeetharan的答案一起去。但對於你的簡單情況，我寧願不必爲控制器添加額外的邏輯。 –

通過這種方法可以說我有n個字段，而不是第一個和最後一個，所以它會爲ng-disabled加上一個冗長的表達式，是否有一個很好的乾淨的方法來實現這個？再次ng-change是最後的手段 – Pankaj

試試這個

angular.module('app', []).controller('myController', function($scope) { 

    $scope.disabled = !$scope.first=="" || !$scope.last == ""; 

})

來源

2016-11-17 07:46:10

您可以通過檢測輸入的變化

angular.module('app', []).controller('myController', function($scope) { 
    $scope.change = function() { 
    $scope.disabled = !$scope.first || !$scope.last; 
    }  
})

HTML

<input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-change="change()" ng-model="first"> 
    <br> 
    <input type="text" ng-change="change()" ng-model='last'>

DEMO

來源

2016-11-17 07:48:15 Sajeetharan

使用這一個做到這一點。我希望它能幫助：

 $scope.disabled=($scope.first==""?true:($scope.last==""?true:false))

來源

2016-11-17 07:49:17

你能解釋你的答案嗎？你做了什麼，爲什麼它工作？ – empiric

實際上我放置了三元運算符。首先，如果將檢查第一個是否爲空，如果不是，那麼它將檢查爲最後 –

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script> 
 
<div ng-app> 
 
<input type='button' value='click' ng-disabled='first.length==0||last.length==0||first==undefined||last==undefined'> 
 
    <br> 
 
    <input type="text" ng-model="first"> 
 
    <br> 
 
     <input type="text" ng-model='last'> 
 
</div>

來源

2016-11-17 07:52:55 Pravin

我編輯了plunker。請抓住它，讓我知道。

JS代碼：

angular.module('app',[]).controller('myController', function($scope){ 

    $scope.disabled = true; 

    $scope.func=function() { 
    $scope.disabled = true; 
    if($scope.first && $scope.last) { 
     $scope.disabled=false; 
    } 
    } 

})

HTML代碼：

<!DOCTYPE html> 
<html ng-app='app'> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-controller='myController'> 

    <!--This button should be disabled if no value is enterd in both the field--> 
    <input type='button' value='click' ng-disabled='disabled'> 
    <br> 
    <input type="text" ng-model="first" ng-change="func()"> 
    <br> 
    <input type="text" ng-model='last' ng-change="func()"> 
</body> 

</html>

來源

2016-11-17 07:54:40 Batman

從angular.js中的控制器啓用禁用按鈕

回答

Plunker

相關問題