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

Question

我正在做一个应用程序。这是一个带有一些字段的表。 特别是，有 2 个选择和 2 个输入。我想要的是(在模式窗口中)显示第一个选择中的元素列表。然后，单击确认，脚本选择该选项。然后，第二个选择自动填充第一个选择的子数组。 THIS这是我正在谈论的内容的一个有效且基本的示例。

现在，我尝试将它与我的 table 混合。事实上我不得不编辑一些代码..事实上它不起作用。可以看到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');
};
};

我尝试编辑它，但找不到解决方案。你能帮我吗？

附注为什么当模式打开时，后面窗口的 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());
    });
  };