Angular JS：在 ng-repeat 中绑定两个文本字段

Question

我有一些 lowValue 和 HighValue 循环并 ng-repeat。

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

在 ng-repeat 中是这样的：

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

我的要求是第一个高值应该等于第二个低值第二个 highValue 应该等于第三个 lowValue 等等..

如何绑定这两个数据？

Answer 1

是这样的吗？第一个 lowValue 和最后一个 highValue 没有绑定。但其余的是相互依存的。

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>

Answer 2

听起来您需要为第 n 个高值和第 (n+1) 个低值设置 1 个变量。

这可能是您的模特：

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

并在您的模板中：

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

Answer 3

您可以使用 ngChange 来完成此操作，请尝试：

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

Angular JS：在 ng-repeat 中绑定两个文本字段

Angular JS : Binding two text filelds in ng-repeat

angularjs

angularjs-ng-repeat

ng-bind