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绑定到该数组中它自己的值。 / p>

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

将所选选项值绑定到ng-repeat内的模型

1 个答案: