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>