How to pass data from AngularJS list to Bootstrap modal?

Question

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/

I think you should use ui-bootstrap. It has modal directive for that purpose. Link to modal section — infernaze
– infernaze, Commented Jun 27, 2016 at 9:32

Hopeful Llama · Accepted Answer · 2016-06-27 09:25:05Z

2

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.

edited Jun 27, 2016 at 9:25

answered Jun 27, 2016 at 9:09

Hopeful Llama

7545 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

DiPix Over a year ago

Hmm, I know what you trying to do but it doesn't work for me. Can you edit my fiddle?

Hopeful Llama Over a year ago

I've editted the Fiddle: jsfiddle.net/sn8u7kqe/1. I will update my answer to reflect what I did.

DiPix Over a year ago

I see a little problem. If I editing modal, then changes appears also on the basic view (before I clicked save)

Hopeful Llama Over a year ago

That'll be because of the two way binding. You could use angular.copy, to create a copy of the fruit, rather than passing the actual fruit itself in the setDataFruit.

Collectives™ on Stack Overflow

How to pass data from AngularJS list to Bootstrap modal?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related