在 Angular 中使用模态 window 进行 Ng 重复和自动完成选择

Question

我正在 Angular 申请。它是 Table 一行，包含 2 列。每列包含一个 select。他们是空的。当用户按下按钮时，模式 window 出现并显示一个网格，其中包含第一个 select 的所有项目（来自 json）。当用户单击一行并按 "Confirm" 时，模态 window 关闭填充第一个 select。同时，第二个 select 填充 selected 项的子数组。

简而言之，有2个select：你在第一个选择选项（通过模态window）然后你在第二个选择它的子数组的项目select.

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

我已经尝试了两种方法来做到这一点，它们都奏效了。在 FIRST CODE 你可以看到，在点击模态 window 之后，第一个 select 会自动填充它（即使它不是第一个，我也不知道为什么..）。而且它不能很好地迭代，因为当你在新行中选择一个项目时，它会修改所有其他选择，我想防止这种情况发生。

      <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 效果更好。它迭代得很好。它会自动更改第二项的 selection well。但是当我按下模态 window 时，第一个 selection 不会自动填充所选项目。

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

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 中使用模态 window 进行 Ng 重复和自动完成选择

Ng-repeat and auto complete selection with modal window in Angular

javascript

modal-dialog

angularjs

angularjs-ng-repeat

ngtable