Donn Jerico Belmonte Donn Jerico Belmonte - 8 days ago 6
AngularJS Question

Passing Object from a table row to bootstrap modal

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><a href="javascript:;" ng-click="getDetails(pokemons)" id="clickable">{{pokemons.pokemon_name}}</a></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">&times;</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

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">&times;</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

Comments