Javascript AngularJS ng重复设置属性

我试图用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>

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>

{{item.label}

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>

{{item.label}

您不能这样设置模型。请尝试以下方法：

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

---

你想做什么？不清楚（我想在第二部分中进行类似的操作。但是，这并没有像上面提到的那样起作用。谢谢。这现在适用于最小-最大值。但是，该值是为模型设置的，但当模型进行设置或在范围上移动滑块时，该值永远不会更新。您可能需要考虑为这类操作创建自定义指令。否则，是否存在一个“onSliderChange”类型的事件，你可以钩住它来获取新的值？让我困惑的是，它只在init上工作，然后不更新。谢谢，你希望在文本框中看到什么？如果你希望在文本框中看到滑块的值，那么你需要将相同的模型分配给这两个。或者

ng model=“item.slider”

或

ng model=“item.model”

它不适用于

setModel（{{item.model}}）

-您需要从

item.model

中删除

{{}

。Ew…很好…对它们有点过分热情。编辑掉了。谢谢。这给了我这个错误：表达式“setSlider”（item.slider）'是不可分配的。元素：在这种情况下，传递索引值并使用该值选择需要选择的对象集合中的属性。示例已编辑。

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