如何將數據從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)"將這些數據簡單地傳遞給angular腳本， 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"> 里面的div其中有ng-controller指令。

控制器僅將其模型（變量和函數等）應用於具有可見性的元素。 按照您的原始示例，模態是div的OUTSIDE，因此數據綁定將不會在那里應用。