javascript - 如何将数据从 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>

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

这是我的 fiddle : http://jsfiddle.net/czus6s3a/

Answer 1

编辑:完全更改了答案。

单击此处获取工作 fiddle :http://jsfiddle.net/sn8u7kqe/1/ .

所做的更改:

在 Controller 中，我创建了一个 $scope.dataFruit = null ，只是为了确保变量已初始化。我还创建了一个函数，如下所示:

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

这是为了确保我们将水果分配到右侧 $scope .

最后，我让你移动了你的 <div class="modal">到内部div其中有 ng-controller指示。

Controller 只会将其模型(变量和函数等)应用于它可见的元素。根据您原来的示例，模式位于 div 外部，因此数据绑定(bind)不会应用到那里。