angularjs - 嵌套的ng-repeat中的angularjs ng-model

Question

我不知道这是否是重复的问题。我已经开始探索 AngularJs。现在我正面临这个问题。这是示例 演示示例

当我单击第一次选择下拉菜单时，下面的内容也会更新。我知道这是由于相同的 ng 模型。那么，我如何为两个不同的选择下拉菜单生成不同的 ng-model。请指导我，因为我对 angularjs 世界很陌生

Answer 1

您可以绑定到color您正在显示的对象：

<select ng-model="color.levelmodel" ng-options="c.id for c in levels">
    <option value="">-- choose color --</option>
</select>

或selecteds像这样的对象：

<select ng-model="selecteds[$index].levelmodel" ng-options="c.id for c in levels">
    <option value="">-- choose color --</option>
</select>

集合内对象$index的当前索引在哪里。colorcolors

Answer 2

我会绑定到每种颜色的级别属性。这样，您不必尝试拥有一个随机的选定值列表，而是拥有一个属于每种颜色的值，这更有意义。

$rootScope.colors = [{
      name: 'black',
      shade: 'dark',
      level: {'id': '' }
    }, {
      name: 'white',
      shade: 'light',
      level: {'id': '' }
}];

$scope.levels = [{
    "id": "1" 
}, {
    "id": "2" 
}, {
    "id": "3"
}];

<li ng-repeat="color in colors">
    <select ng-model="color.level" ng-options="c.id for c in levels">
        <option value="">-- choose color --</option>
    </select>
</li>