通过单击位于Modal - ANGULAR中的<ul>选择选项

Question

我正在申请。这是一个有一些领域的桌子。 特别是，有2个选择和2个输入。我想要的是显示（在模态窗口中）第一个选择中的项目列表。然后，单击确认，脚本选择该选项。然后，第二个选择自动填充第一个选择的子阵列。 THIS是我所谈论的工作和基本的例子。

现在，我试着把它和我的桌子混在一起。事实上，我不得不编辑一些代码......事实上它并没有起作用。你可以看到它HERE （对不起的坏css，在我想要更正Angular脚本之前 - 无论如何，尽可能大地显示它，所以你可以更好地看到表格。）

上一个代码中的问题是，如果您点击列表中的某个项目，然后按确认，则第一个选择不会更改。为什么？

我认为问题出现在脚本的最后部分：

var ModalInstanceCtrl = function ($scope, $modalInstance, items, $http) {

  $scope.items = items;
$scope.selected = {
item: $scope.items[0]
};


$scope.ok = function () {
 $modalInstance.close($scope.selected.item);
}; 


$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};

我尝试编辑它，但我无法找到解决方案。你能救我吗？

P.S。为什么当模态打开时，窗口的 CSS 会改变？

谢谢你的建议!!

Answer 1

编辑：复制按钮（黄色的东西）也已修复

http://plnkr.co/edit/PrT7GAY3ThOUBh5Lxx4i?p=preview

http://plnkr.co/edit/JKdfkUNY3cXzEoaN4Lf9?p=preview

将行作为参数添加到open()，您应该将行特定数据存储在行对象中

  $scope.open = function(row) {
    var modalInstance = $modal.open({
      templateUrl: 'modal.html',
      controller: ModalInstanceCtrl,
      resolve: {
        items: function() {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function(selectedProduct) {
      row.selectedProduct = selectedProduct;
    }, function() {
      $log.info('Modal window closed at: ' + new Date());
    });
  };