concatenato selezionare all'interno di ng-repeat

Question

Non riesco a trovare lo scoping all'interno di ng-repeat. Voglio creare selezioni concatenate e voglio mantenere ciascuna riga in ng-repeat per esistere separatamente in ambiti separati. Al momento la modifica della prima selezione in una qualsiasi delle righe cambierà la seconda selezione in tutte le righe.

(Esempio di vita reale: ho un modulo in cui devo aggiungere auto, prima scegliere un "Make", estrarre i suoi "Modelli" da un'API e mostrare i modelli nella seconda selezione. Gli utenti devono essere in grado di aggiungere qualsiasi numero di automobili)

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

È necessario disporre della parte options2 separata per ogni riga.

Una soluzione semplice sarà semplicemente salvarlo all'interno dell'oggetto riga, ma si potrebbe desiderare una struttura dati più elaborata.

Ecco un semplice 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 ecco la mia soluzione finale. Ho capito che posso accedere alla portata ng-repeat dal controller, facendo passare l'elemento di ripetizione come parametro funzione in ng-modifica:

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:[]}); 
    }; 
} 

Nota 1: Nell'array $scope.rows ho dovuto aggiungere prima una matrice 'opzioni' a ciascuno degli oggetti.

Nota 2: in $scope.updateSelect2 il parametro scope si riferisce al campo di applicazione della voce ng-repeat (in questo caso row), e non è $scope!

FIDDLE HERE