Ng-repeat 并在 Angular 中使用模态窗口自动完成选择答案

【问题标题】：Ng-repeat and auto complete selection with modal window in AngularNg-repeat 并在 Angular 中使用模态窗口自动完成选择
【发布时间】：2015-11-20 00:43:34
【问题描述】：

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

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

【问题讨论】：

标签： javascript angularjs modal-dialog angularjs-ng-repeat ngtable

【解决方案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());
  });

【讨论】：

【解决方案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
       };

   }

【讨论】：