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>

我想使用bootstrap模式编辑每个产品。这就是我需要将特定产品的数据传递给模态的原因。在此之后，我只需使用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 具有div指令的ng-controller。

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

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

1 个答案: