将选定的选项值绑定到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' }] 
    }] 
};