ng-repeat içinde zincirleme seçimi

Question

ng-repeat içinde kapsam belirleme konusunda sorun yaşıyorum. Zincirleme seçimleri oluşturmak istiyorum ve ayrı satırlarda ayrı olarak var olmak için her satırı ng-tekrarda tutmak istiyorum. Şu anda satırlardan herhangi birinde ilk seçimi değiştirdiğinizde, tüm satırlardaki ikinci seçimler değişecektir.

(Gerçek hayat örneği: Araba eklemek zorunda olduğum bir formum var, önce bir 'Make' seçin, 'Modelleri bir api'den çekin ve ikinci seçimde modelleri gösterin. Kullanıcılar ekleyebilmelidir. arabaların herhangi bir sayı)

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

Her satır için options2 bölümünün ayrılması gerekir.

Basit bir çözüm, yalnızca satır nesnesinin içine kaydetmek olacaktır, ancak daha ayrıntılı bir veri yapısı isteyebilirsiniz.

İşte bir basit 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: Burada

$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

Tamam benim son çözümdür.

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

ben denetleyicisinden, ng-değişimde bir işlev parametre olarak tekrar öğesini ileterek ng-repeat kapsamını erişebilir fark

Not1: $scope.rows dizisinde, her bir nesneye bir 'seçenekler' dizisi eklemem gerekiyordu.

Not 2: scope parametre (bu durumda row olarak) ng-repeat öğenin kapsamında ifade eder ve bu $scope değil $scope.updateSelect2 yılında!

FIDDLE HERE