I have a button which needs to be controlled on the basis of if the user has entered the values in the html page.

I have binded model to the text field and set a disabled variable on the $scope, which is enabled/disabled on the value of the input field model.

Here is the 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'>

And here is the correponding angular controller.

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

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

})

It runs for the first time, but then don't show changes on the basis of later modifications.

As per my understanding angular uses two way binding, so if I am modifying anything on the view it should be reflected on the controller, and then anything changed on the controller should be reflected on the view. What wrong I am doing here?

PS: I dont want to use form
I want to avoid the onChange event on the text input field.

Please refer the plunk

I have a button which needs to be controlled on the basis of if the user has entered the values in the html page.

I have binded model to the text field and set a disabled variable on the $scope, which is enabled/disabled on the value of the input field model.

Here is the 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'>

And here is the correponding angular controller.

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

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

})

It runs for the first time, but then don't show changes on the basis of later modifications.

As per my understanding angular uses two way binding, so if I am modifying anything on the view it should be reflected on the controller, and then anything changed on the controller should be reflected on the view. What wrong I am doing here?

PS: I dont want to use form
I want to avoid the onChange event on the text input field.

Please refer the plunk http://plnkr.co/edit/L5wkcpNzMMBZxtcitJwk?p=preview

• javascript
• angularjs

6 Answers 6

Use ng-disabled='!first || !last'.

The following logic seems to work, at least in your Plunker:

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

It is true that the scoped variable $scope.first and $scope.last are two-way bound to the controller. This means that any change in the input boxes should automatically reflect in the state of these variables. But disabled is a puted quantity, and this is calculated once, at the time the controller loads, but not again in your code. Hence, disabled appears to always be true, even after you have entered text into both input boxes.

Plunker

You can do this by detecting the changes in the inputs

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

Try this

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

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

})

use this one. i hope it helps:

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

<script src="https://ajax.googleapis./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>

I have edited the plunker. Please chack it and let me know.

js code:

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

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

<head>
  <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs/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>