將選定的選項值綁定到ng-repeat模型中

Question

當我以這種方式將選項值綁定到模型時，它可以工作。 {{profile_filter}}將包含{{option.label}}：

<select ng-model="profile_filter"> 
<option ng-repeat="option in showCase.filters" value="{{option.label}}"> 
{{option.label}} 
</option>    
</select> 

// Show Selected Option : 
<div>{{profile_filter}}</div> 

隨着ng-repeat我增加了額外的<select>下拉菜單，並如預期{{profile_filter}}現在是空的。邏輯告訴它與ng-model="profile_filter"不具有唯一範圍不再做：

<div class="filters" ng-repeat="filter in showCase.filters"> 
<label>{{filter.label}} 
<select ng-model="profile_filter"> 
<option ng-repeat="option in filter.options" value="{{option.label}}"> 
{{option.label}} 
</option>    
</select>   
</label>   
</div> 

// Empty 
<div>{{profile_filter}}</div> 

問：我應該採取什麼方法來解決這個問題？ 在此先感謝。

Answer 1

我不確定你想要什麼profile_filter是因爲你有多個選擇器，但是如果你想讓你可以使profile_filter成爲一個數組，並且將每個select都綁定到它自己的數組中。

http://jsfiddle.net/3c70sqdt/

<div ng-controller="MyCtrl"> 
    <div class="filters" ng-repeat="filter in showCase.filters"> 
     <label>{{filter.label}} 
      <!-- bind to a specific index in the controller array using $index --> 
      <select ng-model="profile_filter[$index]"> 
       <option ng-repeat="option in filter.options" value="{{option.label}}">{{option.label}}</option> 
      </select> 
     </label> 
    </div> 
    <!-- display the first value --> 
    <div>{{profile_filter[0]}}</div> 
</div> 

如果設置了控制器與新的範圍數組，在div上面將顯示A或B使用以下展示的數據。

$scope.profile_filter = []; 
$scope.showCase = { 
    filters: [ 
    { 
     label: 'hello', 
     options: [ { label: 'A' }, { label: 'B' }] 
    }, 
    { 
     label: 'hello again', 
     options: [ { label: 'C' }, { label: 'D' }] 
    }] 
};