绑定选定的选项值以在ng-repeat中建模

debugcn 发表于 Dev

点播

当我以此方式将选项值绑定到模型时，它就可以工作。{{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>

问题：我应该采取什么方法来解决这个问题？提前致谢。

帕特里克

我不确定您要profile_filter成为什么样子，因为您有多个选择器，但是如果您愿意，可以使profile_filter成为一个数组，并将每个选择绑定到该数组中自己的值。

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将使用下面的showCase数据显示A或B。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。