Javascript 如何将数据从AngularJS列表传递到引导模式？

在我看来，我有一个项目列表：

<li ng-repeat="fruit in items">
{{fruit.name}} / {{fruit.price}}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">EDIT</button>
</li>

{{fruit.name}/{{fruit.price}
编辑

我想使用引导模式编辑每个产品。这就是为什么我需要将特定产品的数据传递给modal。在此之后，我将使用

ng click=“saveFruit（dataFruit）”

将此数据传递给angular脚本，并且

saveFruit

将保存数据

这是我的小提琴：

---

编辑：完全更改了答案

单击此处查看工作小提琴：

所作的修改：

在控制器中，我创建了一个

$scope.dataFruit=null

，以确保变量已初始化。我还创建了一个函数，如下所示：

$scope.setDataFruit = function(fruit) {
    $scope.dataFruit = fruit;
};

这是为了确保我们将水果分配到正确的

$scope

最后，我让您将

移动到内部的

div

，该div具有

ng controller

指令

---

控制器将仅将其模型（变量和函数等）应用于其具有可见性的元素。根据您最初的示例，模态在div之外，因此数据绑定不会应用于div。

EDIT:完全更改了答案

单击此处查看工作小提琴：

所作的修改：

在控制器中，我创建了一个

$scope.dataFruit=null

，以确保变量已初始化。我还创建了一个函数，如下所示：

$scope.setDataFruit = function(fruit) {
    $scope.dataFruit = fruit;
};

这是为了确保我们将水果分配到正确的

$scope

最后，我让您将

移动到内部的

div

，该div具有

ng controller

指令

---

控制器将仅将其模型（变量和函数等）应用于其具有可见性的元素。根据您最初的示例，模式在div之外，因此数据绑定不会在那里应用。

Hmm，我知道您想做什么，但它对我不起作用。你能编辑我的小提琴吗？我已经编辑了小提琴：。我会更新我的答案以反映我所做的。我发现了一个小问题。如果我编辑模式，那么更改也会出现在基本视图上（在我单击保存之前），这是因为双向绑定。您可以使用

angular.copy

，创建

水果的副本，而不是在
setDataFruit
中传递实际水果本身。嗯，我知道您想做什么，但对我不起作用。你能编辑我的小提琴吗？我已经编辑了小提琴：。我会更新我的答案以反映我所做的。我发现了一个小问题。如果我编辑模式，那么更改也会出现在基本视图上（在我单击保存之前），这是因为双向绑定。您可以使用
angular.copy
，来创建
水果的副本，而不是在
setDataFruit
中传递实际水果本身。我认为您应该使用。为此，它具有模态指令。这可能会有帮助。我想你应该使用。为此，它具有模态指令。这可能会有帮助。