Matt Boyle Matt Boyle - 2 days ago 5
AngularJS Question

binding information in a HTML element

I have a http.get that returns an Array of Applications

<div id ="app" ng-repeat="app in applications" >
<carddata-toggle="modal" data-target="#myModal" ></card>
</div>


For each of them, i create a card (custom directive...think google now cards) and add a bootstrap modal to them. The idea being you can then click on each card and get more info about that specific app.

In the code for my Modal, I want to retrieve information about the app (for example the app name). As this is outside the for loop, Angular has lost track of my app name and therefore throws an error.

<div class="modal modal-fullscreen fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="myModalLabel">{{app.name}} Status</h4>
</div>


I have read through the angular Api... I was looking for a way to "bind" the app name to the modal so it is aware of it, but couldn't see anything suitable. I'm new to Angular and I am therefore probably not approaching it right.

How would you approach this?

Answer

In your view

<div id ="app" ng-repeat="app in applications" >
    <carddata-toggle="modal" data-target="#myModal" ng-click="setApp(app)"></card>
</div>


<h4 class="modal-title" id="myModalLabel">{{selectedApp.name}} Status</h4>

In your controller

$scope.setApp = function(appParam){
    $scope.selectedApp = appParam;
}
Comments