ng-repeat中的隔离模型

Question

我正在尝试在ng-repeat隔离模型，但是此模型必须有权访问相同的数据。

这是用来说明问题的JS小提琴： http : //jsfiddle.net/r50adyx4/

如果单击添加按钮并在选择选项之间切换，您将看到，只有第一个选择输入被隔离。 每个重复的模型中其他两个都在变化。

<div class="addCert" ng-click="allLicences.push(allLicences.length+1)">
        <p>Add certification +</p>
    </div>
<form ng-submit="processForm()">
    <ul ng-repeat="licence in allLicences">
        <select ng-model="models[licence]" ng-options="l.cntryName for l in data"></select>
         <select ng-model="models[licence].discipline" ng-options="d.name for d in models[licence].disciplines"></select>
         <select ng-model="models[licence].discipline.level" ng-options="lvl.levelName for lvl in models[licence].discipline.levels"></select>
    </ul>

我认为以ng-repeat中的models[licence]来定位模型会使所有事件隔离开来。

那么发生了什么？ 我如何隔离其他两个，以便它们在每个ng-repeat中都是唯一的？

编辑使事情更清楚：
如果添加一个或多个模型（证书），并且为所有这些模型选择相同的国家（例如斯洛文尼亚），则其他两个选择对于每个模型必须独立。

如果可行，我可以在第一个中选择Slovenia-> Alpine skiing-> U1，在第二个中选择Slovenia-> Telemark-> U5。
我希望我足够清楚...

Answer 1

的jsfiddle

重复中的每个项目都应引用一个单独的对象（数据），以便将所有绑定都分开。

JS

$scope.add = function () {
    $scope.allLicences.push(angular.copy($scope.data));
}

$scope.allLicences = [];
$scope.add();

标记

<div class="addCert" ng-click="add()">
    <p>Add certification +</p>
</div>
<form ng-submit="processForm()">
    <ul ng-repeat="licenceItem in allLicences">
        <select ng-model="licence" ng-options="l.cntryName for l in licenceItem"></select>
        <select ng-model="licence.discipline" ng-options="d.name for d in licence.disciplines"></select>
        <select ng-model="level" ng-options="lvl.levelName for lvl in licence.discipline.levels"></select>
    </ul>
    <hr>
    <hr>{{ allLicences}}
    <input type="submit" value="submit">
</form>

编辑 ：

我认为此版本更好，因为您不需要复制数据 -JSFiddle

JS

$scope.add = function () {
    $scope.allLicences.push({});
}

标记

    <ul ng-repeat="item in allLicences track by $index">
        <select ng-model="allLicences[$index].licence" ng-options="l.cntryName for l in data"></select>
        <select ng-model="allLicences[$index].discipline" ng-options="d.name for d in allLicences[$index].licence.disciplines"></select>
        <select ng-model="allLicences[$index].level" ng-options="lvl.levelName for lvl in allLicences[$index].discipline.levels"></select>
    </ul>