チェーン付きng-repeat内で選択

Question

ng-repeat内でスコープを計算することに問題があります。私は連鎖選択を作成したい、そして、ng-repeatの各行を別々のスコープで別々に存在させたい。現在、いずれかの行の最初の選択を変更すると、すべての行の2番目の選択が変更されます。

（実生活の例：私は自動車を追加しなければならないフォームを持っています。最初に「Make」を選択し、「Model」をAPIから取り出し、モデルを2番目の選択肢に表示します。車の任意の数）

HTML：。

<div ng-controller="MyCtrl"> 
    <div ng-repeat="row in rows"> 
    <select ng-options="option.value as option.title for option in options1" ng-model="row.select1" ng-change="updateSelect2(row.select1)"></select> 
    <select ng-options="option.value as option.title for option in options2" ng-model="row.select2"></select> 
    </div> 
    <a ng-click="addRow()">Add Row</a> 
</div> 

JS：

function MyCtrl($scope) { 
    $scope.rows = [{}]; 
    $scope.options1 = [ 
    {title: 'Option 1', value: '1'}, 
    {title: 'Option 2', value: '2'}, 
    {title: 'Option 3', value: '3'} 
    ]; 

    $scope.options2 = []; 

    $scope.updateSelect2 = function(val) { 
    if (val === '1') { 
     $scope.options2 = [ 
     {title: 'A', value: 'A'}, 
     {title: 'B', value: 'B'} 
     ]; 
    } else if (val === '2') { 
     $scope.options2 = [ 
     {title: 'AA', value: 'AA'}, 
     {title: 'BB', value: 'BB'} 
     ]; 
    } else { 
     $scope.options2 = [ 
     {title: 'AAA', value: 'AAA'}, 
     {title: 'BBB', value: 'BBB'} 
     ]; 
    } 
    }; 

    $scope.addRow = function() { 
    $scope.rows.push({}); 
    }; 
} 

FIDDLE HERE

Answer 1

options2部分を各行ごとに区切る必要があります。

単純な解決策は、行オブジェクトの内部に保存することですが、より精巧なデータ構造が必要な場合があります。

ここでは簡単なexample using your codeです。

HTML：

<div ng-repeat="row in rows"> 
    <select ng-options="option.value as option.title for option in options1" ng-model="row.select1" ng-change="updateSelect2(row.select1, $index)"> </select> 
    <select ng-options="option.value as option.title for option in row.options2" ng-model="row.select2"></select> 
</div> 

JS：ここ

$scope.updateSelect2 = function(val, index) { 
    if (val === '1') { 
    $scope.rows[index].options2 = [ 
     {title: 'A', value: 'A'}, 
     {title: 'B', value: 'B'} 
    ]; 
    } else if (val === '2') { 
    $scope.rows[index].options2 = [ 
     {title: 'AA', value: 'AA'}, 
     {title: 'BB', value: 'BB'} 
    ]; 
    } else { 
    $scope.rows[index].options2 = [ 
     {title: 'AAA', value: 'AAA'}, 
     {title: 'BBB', value: 'BBB'} 
    ]; 
    } 
}; 

Answer 2

[OK]を、私の最終的な解決策です。私はNG-変化関数パラメータとして繰り返しアイテムを通過させることによって、コントローラからNGリピート範囲にアクセスすることができることに気づいた。

HTML：

<div ng-controller="MyCtrl"> 
    <div ng-repeat="row in rows"> 
    <select ng-options="option.value as option.title for option in select1options" ng-model="row.select1" ng-change="updateSelect2(row.select1, row)"></select> 
    <select ng-options="option.value as option.title for option in row.options" ng-model="row.select2"></select> 
    </div> 
    <a ng-click="addRow()">Add Row</a> 
</div> 

JS：

function MyCtrl($scope) { 
    $scope.rows = [{options:[]}]; 

    $scope.select1Options = [ 
    {title: 'Option 1', value: '1'}, 
    {title: 'Option 2', value: '2'}, 
    {title: 'Option 3', value: '3'} 
    ]; 

    $scope.updateSelect2 = function(val, scope) { 
    if (val === '1') { 
     scope.options = [ //<-- this scope is the ng-repeat item's scope, from the function parameter 
     {title: 'A', value: 'A'}, 
     {title: 'B', value: 'B'} 
     ]; 
    } else if (val === '2') { 
     scope.options = [ 
     {title: 'AA', value: 'AA'}, 
     {title: 'BB', value: 'BB'} 
     ]; 
    } else { 
     scope.options = [ 
     {title: 'AAA', value: 'AAA'}, 
     {title: 'BBB', value: 'BBB'} 
     ]; 
    } 
    }; 

    $scope.addRow = function() { 
    $scope.rows.push({options:[]}); 
    }; 
} 

注1：$scope.rowsアレイでは、それぞれのオブジェクトに 'options'配列を追加する必要がありました。

注2：$scope.updateSelect2にscopeパラメータは、（この場合はrow中）NG-繰り返し項目の範囲を指し、それは$scopeありません！

FIDDLE HERE