Angular JS : Binding two text filelds in ng-repeat

Question

I have and ng-repeat with some lowValue and HighValue loops.

    1. LowValue1     HighValue1
    2. LowValue2     HighValue2
    3. LowValue3     HighValue3
    . . .
    n. LowValue n     HighValue n

In ng-repeat is something like :

  <div ng-repeat="categoryObject in category.tiers track by $index"> 
         <div class="col-lg-3 ">
              <label class="control-label" translate> From ($) </label>
              <input type="number" class="form-control" ng-model="categoryObject.lowValue" >
         </div>
         <div class="col-lg-3 ">
              <label class="control-label" translate> To ($) </label>
              <input type="number" class="form-control" ng-model="categoryObject.highValue" >
         </div>
    </div>

And my requirement is 1st highValue should be equal to 2nd lowValue and 2nd highValue should be equal to 3rd lowValue and son on..

How can I bind these two data?

I'm not clear. Do you meant to say when they enter a value in highValue, the next row ng-model lowValue should be updated with same value? — Coder
– Coder, Commented Oct 14, 2015 at 5:39

Bhargav Ponnapalli · Accepted Answer · 2015-10-14 05:59:19Z

Something like this? The first lowValue and the last highValue is not bound. But the rest are interdependent.

http://jsfiddle.net/xc7czgfz/

var myApp = angular.module('myApp',[]).controller("MyCtrl",["$scope",function($scope) {
    $scope.objs = [{lowValue:0,highValue:1},{lowValue:1,highValue:5},{lowValue:5,highValue:6}];
    $scope.handleChange = function(){
        console.log("handlechange");
        var index = arguments[0];
        var type = arguments[1];
        if(index!=null && type!=null){
            if(type == "low" &&(index > 0 && index< $scope.objs.length)){
                   $scope.objs[index-1].highValue= $scope.objs[index].lowValue;
            }
            if(type == "high" &&(index >= 0 && index< ( $scope.objs.length-1))){
                    $scope.objs[index+1].lowValue= $scope.objs[index].highValue;
            }
        
        }
        
    }	
      
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl">
   
<div ng-repeat="obj in objs"> 
     <div class="col-lg-3 ">
          <label class="control-label" translate> From ($) </label>
         
          <input type="number" class="form-control" ng-model="obj.lowValue" ng-change='handleChange($index,"low")'>
     </div>
     <div class="col-lg-3 ">
         <label class="control-label" translate> To ($) </label>
          <input type="number" class="form-control" ng-model="obj.highValue" ng-change='handleChange($index,"high")'>
     </div>
</div>
    </div>
  </div>

Thnqq.. it is something not I expected, but it is working fine. :)

Moshe Shaham · Accepted Answer · 2015-10-14 06:06:13Z

it sounds like you need to have 1 variable for both n-th high value and (n+1)th low value.

so this might be your model:

$scope.values = [firstLowValue, secondLowValues ...];
$scope.lastHighValue = lastHighValue;

and in your template:

<div ng-repeat="value in values"> 
         <div class="col-lg-3 ">
              <label class="control-label" translate> From ($) </label>
              <input type="number" class="form-control" ng-model="values[$index]" >
         </div>
         <div class="col-lg-3 " ng-if="!$last">
              <label class="control-label" translate> To ($) </label>
              <input type="number" class="form-control" ng-model="values[$index + 1]" >
         </div>
<div class="col-lg-3 " ng-if="$last">
              <label class="control-label" translate> To ($) </label>
              <input type="number" class="form-control" ng-model="lastHighValue" >
         </div>
    </div>

Danish Altaf Satti · Accepted Answer · 2015-10-14 06:17:55Z

You can us ngChange to accomplish this, try :

<div ng-repeat="categoryObject in category.tiers track by $index"> 
         <div class="col-lg-3 ">
              <label class="control-label" translate> From ($) </label>
              <input type="number" class="form-control" ng-model="categoryObject.lowValue" >
         </div>
         <div class="col-lg-3 " ng-if="!$last">
              <label class="control-label" translate> To ($) </label>
              <input type="number" class="form-control" ng-model="categoryObject.highValue" ng-change="categoryObject.lowValue[$index+1]=categoryObject.highValue[$index]">
         </div>
          <div class="col-lg-3 " ng-if="$last">
              <label class="control-label" translate> To ($) </label>
              <input type="number" class="form-control" ng-model="categoryObject.highValue">
         </div>
    </div>

Collectives™ on Stack Overflow

Angular JS : Binding two text filelds in ng-repeat

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related