CODEWITHSUNDEEP
javascripthtmlangularjs
Naresh
Naresh

Reputation: 108

Angular 1 ng-model not working on second input field

Please help me in this regard,

I have generated two input fields dynamically in AngularJS controller. I will take first input value into the second one and the second input field is readonly.

If the second input value is greater than 50, a division should be visible.

<input type="number" ng-model="firstInput"><br/>
<!--Some code depend on input value -->
<input type="number" ng-value="firstInput" ng-model="secondInput" readonly><br/>
<div ng-if="secondInput>50">Hello</div>

Here, I must check the div ng-if with the second input model, not from the first input.

Upvotes: 2

Views: 150

Answers (2)

Hadi
Hadi

Reputation: 17299

Try this 

 <input type="number" ng-model="firstInput"><br/>
 <input type="number" ng-value="secondInput = firstInput" ng-model="secondInput" readonly><br/> 
 <div ng-if="secondInput > 50">Hello</div>


var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="AppCtrl">
<input type="number" ng-model="firstInput"><br/>
<!--Some code depend on input value -->
<input type="number" ng-value="secondInput = firstInput" ng-model="secondInput" readonly><br/>
<div ng-if="secondInput>50">Hello</div>
</div>

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222720

If you want to use two variables, you can assign the value of firstInput to secondInput use $watch like this in your controller,

   $scope.$watch('firstInput', function() {
           $scope.secondInput = $scope.firstInput;
   });

DEMO

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
 $scope.$watch('firstInput', function() {
       $scope.secondInput = $scope.firstInput;
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <div ng-app="myApp" ng-controller="AppCtrl">
<input type="number" ng-model="firstInput"><br/>
<!--Some code depend on input value -->
<input type="number"  ng-model="secondInput"    readonly><br/>
<div ng-if="secondInput>50">Hello</div>
</div>

Upvotes: 3

Related Questions