如何将数据从 AngularJS 列表传递到 Bootstrap 模式？

Question

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

<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>

我想使用引导模式编辑每个产品。这就是为什么我需要将特定产品的数据传递给模态。在此之后，我将使用ng-click="saveFruit(dataFruit)" 将这些数据简单地传递给角度脚本，saveFruit 将保存数据。

这是我的小提琴： http://jsfiddle.net/czus6s3a/

Answer 1

编辑：完全改变了答案。

单击此处获取有效的小提琴：http://jsfiddle.net/sn8u7kqe/1/。

所做的更改：

在控制器中，我创建了一个$scope.dataFruit = null，只是为了确保变量被初始化。我还创建了一个函数如下：

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

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

最后，我让你将你的 <div class="modal"> 移动到 INSIDE 具有 ng-controller 指令的 div。

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