Passing Object from a table row to bootstrap modal - angularjs

Question

I'm trying to put to a modal the attributes of a clicked table row. I am using angularjs. Nothing happens in my code:
Basically this is my html code like below:
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>{{pokemons.pokemon_name}}</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
Then this is in my script tag:
var myApp = angular.module('myApp', [])
myApp.controller('SimpleController', ['$scope', '$http', function($scope, $http) {
$scope.findPokemon = function(filterKey){
$http.get('pokemon/search-by-name/' + filterKey).then(function(response) {
$scope.pokemon = response.data
})
}
$scope.getDetails = function(pokemons){
$scope.pokemonDetails = pokemons
$('#viewModal').modal('show');
}
}]) `
Modal:
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{pokemonDetails.pokemon_number}}</p>
<p>Type1: {{pokemonDetails.type1}}</p>
<p>Type2: {{pokemonDetails.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</a>
<button class="options-link" href="#">Delete</a>
</div>
</div>
</div>
</div>
Btw some parts there seem unnecessary i just included them

Answer 1

Here is the answer for your problem
HTML
<table>
<tr ng-repeat="pokemons in pokemon">
<td>{{pokemons.pokemon_number}}</td>
<td>
<button type="button" class="btn btn-default"
style="width:100px; height:25px"
ng-click="openModal(pokemons)"
data-toggle="modal" data-target="#pokemon-zoom" >
{{pokemons.pokemon_name}}</button>
</td>
<td>{{pokemons.type1}}</td>
<td>{{pokemons.type2}}</td>
</tr>
</table>
Modal Code is this
<div id="pokemon-zoom" class="modal">
<div class="modal-content animate">
<div class="imgcontainer">
<span onclick="document.getElementById('pokemon-zoom').style.display='none'" class="close" title="Close Modal">×</span>
</div>
<div class="modal-container">
<img id="pokemon-image" src="Bulbasaur.jpg" height="200px" width="200px">
<div class="pokemon-details">
<h1>Pokemon Data of</h1>
<div id="pokemon-data-text">
<p>Pokemon no: {{selected_pokemon.pokemon_number}}</p>
<p>Type1: {{selected_pokemon.type1}}</p>
<p>Type2: {{selected_pokemon.type12}}</p>
<p></p>
</div>
</div>
<div class="options">
<button class="options-link" href="#">Edit</button>
<button class="options-link" href="#">Delete</button>
</div>
</div>
</div>
</div>
your controller will be having a method with name openModal
$scope.openModal=function (ob){
$scope.selected_pokemon=ob;
}
Here is a LIVE DEMO

Answer 2

You're trying to show the modal by calling $('#viewModal').modal('show');, but your modal has id pokemon-zoom. Show the modal by calling $('#pokemon-zoom').modal('show');
Make sure the modal is defined within the scope of the Controller SimpleController so that it can access pokemonDetails!