吴重复和自动完成与模态窗口中的角度选择

Question

我正在做Angular中的应用程序。它是一个包含2列的表格行。每列包含一个选择。他们是空的。当用户按下按钮时，模式窗口将显示并显示包含第一个选择的所有项目（来自json）的网格。当用户点击一行并按下“确认”时，模式窗口关闭填充第一个选择。同时，第二个选择填充所选项目的子阵列。

几句话，有2个选择：你选择第一个选项（通过一个模式窗口），然后你选择在第二选择其子阵列的项目。

然后，用户可以添加新行，重复选择。

我试过两种方式来做到这一点，他们一半工作。在FIRST CODE 你可以看到，点击模态窗口后，第一个选择自己填充（即使它不是第一个，我不知道为什么..）。它不会迭代，因为当你选择新行中的一个项目时，它会修改所有其他的选择，我想要阻止它。

 <select ng-model="selectedProduct" ng-options="a as a.nome for a in items" ng-change="selectLot(select1)"> 
    <option value="">-- Select Product --</option> 
    </select> 

    <select ng-model="selectedLot" ng-options="a as a.value for a in selectedProduct.lots" ng-change="lotSelect(select2)"> 
    <option value="">-- Select Lot --</option> 
    </select> 

SECOND CODE效果更好。它迭代得很好。它会自动更改第二个项目的选择。但是当我按下模式窗口时，第一个选择不会自动填充选择的项目。

你能帮我吗？我找不到解决方案.....非常感谢您的建议！

Answer 1

问题的核心是，如果你想有一个编辑数组中的元素形式，你需要有单独的模型为每个阵列中的行。您可以通过将“selectedProduct”和“selectedLot”设置为将数组索引映射到该行所选值的对象来实现此目的。

我有工作为例进行更新plunker，但没有在这里看是你需要做出变化的纲要。你需要改变你的模型，使他们使用该行的数组索引引用的东西，也即指数进入该修改行功能：

<button class="btn btn-default" ng-click="open($index)">OPEN!!</button> 

    <select ng-model="selectedProducts[$index]" ng-options="a as a.nome for a in items" ng-change="selectLot(select1, $index)"> 
    <option value="">-- Select Product --</option> 
    </select> 

    <select ng-model="selectedLots[$index]" ng-options="a as a.value for a in selectedProducts[$index].lots" ng-change="lotSelect(select2, $index)"> 
    <option value="">-- Select Lot --</option> 
    </select> 

你也想在你的控制器一起工作，以更新功能数组索引：

$scope.selectLot = function(data, index){ 
    $scope.Subarray = []; 
    for(i=0; i<$scope.items.length; i++){ 
    if(data == $scope.items[i].id){ 
     $scope.Subarray[$index] = $scope.items[i].lots; 
     $scope.selectedProducts[$index] = $scope.items[i]; 
     break; 
    } 
    } 
    console.log($scope.Subarray); 
} 

$scope.lotSelect = function(id, $index) { 
    for(i=0; i<$scope.Subarray[$index].length; i++){ 
    if(id == $scope.Subarray[$index][i].id){ 
     $scope.selectedLots[$index] = $scope.Subarray[$index][i]; 
     break; 
    } 
    } 
} 

和模态：

$scope.open = function ($index) { 
    // ... 

    modalInstance.result.then(function (selectedItem) { 
    $scope.selectedProducts[$index] = selectedItem; 
    }, function() { 
    $log.info('Finestra selezione prodotto chiusa alle ore: ' + new Date()); 
    }); 

Answer 2

你可能不应该使用SELECT如果您允许选择在一个模式弹出发生。所有你想要做的就是显示你可以通过许多不同方式轻松完成的选定项目。另外在第一个例子中，prodIsChanged（），它是子数组的设置，永远不会被调用。更简单的解决方案可能是这样的：

<div>{{mainProduct}}</div> 
    <select ng-options="a as a.value for a in selectedProduct"></select> 

    var myApp = myApp.controller('Cntrl', function ($scope,$watch) { 
     $scope.mainProduct = ''; 
     $scope.selecedProduct = ''; 

     $watch('mainProduct',function(old,new) { 
      $scope.selectedProduct = ??? // The mainProduct has changed so set the list of sub products as necessary 
     }; 

    }