AngularJS ng-repeat設置屬性

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

最小值和最大值不會在所有的工作。模型顯示正確的值，直到它們改變並且我嘗試更改只讀值錯誤。

Answer 1

試試這個

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