Question

我正在尝试使用ng-repeat来摆脱一堆重复的div。

  <!-- I have 21 of these -->
  <div class="table-row">
     <span class="glyphicon glyphicon-wrench"></span>
     <label>Chloride</label>
     <input type="range" min="700" max="1200" ng-model="chlorideSlider"/>
     <input type="text" class="val" ng-model="chloride"/>
  </div>

  <!-- I'd like to use ng-repeat to create them -->
  <div class="table-row" ng-repeat="item in sliderItems.items">
     <span class="glyphicon glyphicon-pencil"></span>
     <label>{{ item.label }}</label>
     <input type="range" min="item.min" max="item.max" ng-model="item.slider"/>
     <input type="text" class="val" ng-model="item.model"/>
  </div>

这是数据：

  $scope.sliderItems = { 'items' : [
     {'label' : 'WBC', 'min' : 0, 'max' : 600,  'slider' : $scope.wbc, 'model' : $scope.wbc, 'tr' : 'wbc_tr' },
     {'label' : 'Respiration', 'min' : 0, 'max' : 60,  'slider' : $scope.resp, 'model' : $scope.resp, 'tr' : 'wbc_tr' }
  ]};

min和max根本不起作用。模型显示正确的值，直到它们发生变化，并且我尝试更改只读值错误。

Answer 1

Min和Max需要包含在{{ }}中，因为它们不是角度指令，因此不会计算表达式。所以它会变成：

<div class="table-row" ng-repeat="item in sliderItems.items">
     <span class="glyphicon glyphicon-pencil"></span>
     <label>{{ item.label }}</label>
     <input type="range" min="{{item.min}}" max="{{item.max}}" ng-model="item.slider"/>
     <input type="text" class="val" ng-model="item.model"/>
  </div>

Answer 2

试试这个

<div class="table-row" ng-repeat="item in sliderItems.items">
     <span class="glyphicon glyphicon-pencil"></span>
     <label>{{ item.label }}</label>
     <input type="range" min="{{item.min}}" max="{{item.max}}" ng-model="item.slider"/>
     <input type="text" class="val" ng-model="item.model"/>
  </div>

Answer 3

您不能以这种方式设置模型。试试这个：

<div class="table-row" ng-repeat="item in sliderItems.items">
 <span class="glyphicon glyphicon-pencil"></span>
 <label>{{ item.label }}</label>
 <input type="range" min="{{item.min}}" max="{{item.max}}" ng-change="setSlider($index)"/>
 <input type="text" class="val" ng-change="setModel($index)"/>
</div>

在控制器内部，您将需要类似以下的功能：

$scope.setSlider = function(selectedSlider){
    $scope.mySlider = items[selectedSlider].slider;
}

$scope.setModel = function(selectedModel){
    $scope.myModel = items[selectedModel].model;
}

AngularJS ng-repeat设置属性

3 个答案: