Как передавать данные из списка AngularJS в Bootstrap modal?

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

EDIT: Измененный ответ полностью.

Щелкните здесь для рабочей скрипки: http://jsfiddle.net/sn8u7kqe/1/.

Изменения:

В контроллере я создал $scope.dataFruit = null, просто чтобы убедиться, что переменная инициализируется. Я также создал функцию следующим образом:

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

Это должно было гарантировать, что мы присваиваем плод правой $scope.

Наконец, я был вы перемещаете <div class="modal"> к ВНУТРИdiv который имел ng-controller директиву.

Контроллер будет применять только свою модель (переменные, функции и т. Д.) К элементам, которые она имеет видимость. В соответствии с вашим оригинальным примером модальный был OUTSIDE для div, поэтому привязка данных не применялась бы там.