Question

我正在尝试将一个单击的表行的属性放到模态中。我正在使用angularjs。我的代码中没有任何事情发生：基本上这是我的html代码，如下所示：

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

然后这是我的脚本标签：

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');
    } 
}]) `

模态：

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

顺便说一下那些部分似乎没必要我只是把它们包括在内

Answer 1

您尝试通过调用$('#viewModal').modal('show');来显示模态，但您的模态标识为pokemon-zoom。通过调用$('#pokemon-zoom').modal('show');

显示模态

确保模型在Controller SimpleController的范围内定义，以便它可以访问pokemonDetails！

Answer 2

以下是您的问题的答案

HTML

for(String line : userInfo){
    String[] splitStrSpace = line.split("[ ]");
    for(int j=0; j<=splitStrSpace.length; j++){
        System.out.println(splitStrSpace[j]);
    }
}

模态代码就是这个

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

你的控制器将有一个名为openModal

的方法

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

这是LIVE DEMO

将对象从表行传递到引导模式

2 个答案: