Question

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

简而言之，有两个选择：你在第一个选择选项（通过模态窗口），然后在第二个选择中选择其子阵列的项目。

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

我已经尝试了两种方法来做到这一点，而且他们只做了一半。在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
       };

   }

使用Angular中的模态窗口进行Ng重复和自动完成选择

2 个答案: