CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
DiPix
DiPix

Reputation: 6083

How to pass data from AngularJS list to Bootstrap modal?

At my view I have a list of items:

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

And I'd like to edit each product using bootstrap modal. That's why I need to pass data of specific product to modal. After this I'll simply pass this data to angular script using ng-click="saveFruit(dataFruit)" and saveFruit will save data.

Here is my fiddle: http://jsfiddle.net/czus6s3a/

Upvotes: 0

Views: 733

Answers (1)

Hopeful Llama
Hopeful Llama

Reputation: 758

EDIT: Changed answer entirely.

Click here for a working fiddle: http://jsfiddle.net/sn8u7kqe/1/.

Changes made:

In the controller, I created a $scope.dataFruit = null, just to ensure the variable is initialized. I also created a function as follows:

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

This was to ensure that we were assigning our fruit to the right $scope.

Finally, I had you move your <div class="modal"> to INSIDE the div which had the ng-controller directive.

The controller will only apply it's model (variables, and functions, etc), to the elements that it has visibility of. As per your original example, the modal was OUTSIDE of the div, so the data binding would not have applied there.

Upvotes: 2

Related Questions