javascript - 从列表中获取值 (API)

Question

我正在尝试创建一个列表，从 API 获取信息。当有人单击该列表中任何值中的按钮时，将会出现一个模式，显示该特定值的详细信息。

该列表正在工作，但是，当我尝试显示特定值的信息时，仅显示每个模态的第一个信息。

这是我到目前为止的代码:

(function(){
 'use strict';
var lista = {
    templateUrl: './app/components/list.components.html',
    controller: listCtrl
};

angular
.module('listApp')
.component('listadoFacturas', lista);
 listCtrl.$inject = ["allData", "couponExist"];
 function listCtrl(allData, couponExist) {

 var vm = this;

 vm.consult = function(){

 vm.lookFor = allData.get({idOrder: vm.idOrder})
                     .$promise
                     .then(function(data){

                     for(var i = 0; i< data.Response.length; i++){

                        data.Response[i].Select = vm.something;
                        //console.log(data.Response[i].Id);

                        }

                     vm.respuesta = data.Response;
                     console.log(vm.respuesta);

                     vm.totalList = data.Response.length > 0;
                     //console.log(vm.totalList);
                     //searchperId();

                     });


 }

 vm.modalPop = function(){

    $('#myModal2').modal({
            show: true
        });

 }

vm.lookFor

从 API 获取数据，并且

vm.modalPop

打开模式(我正在使用 Bootstrap )。

这是我的列表 HTML:

<div class="title">
<strong>Search</strong>
</div>

<br>


<form class="form-inline">
    <div class="am form-group">
    </div>
    <div class="form-group">
        <input type="text" class="em form-control" id="inputPassword2" placeholder="Search by order, email..." ng-model="$ctrl.idOrder">
    </div>
    <button type="submit"
            class="btn btn-default"
            ng-click="$ctrl.consult()">
        <span class="glyphicon glyphicon-search"></span> Search
    </button>
</form>


<br>
<br>
<br>

<div class="container">
    <table class="table table-hover">
        <thead class="header-color">
        <tr>
            <th class="header-text">Request</th>
            <th class="header-text">Name</th>
            <th class="header-text">DateRequest</th>
            <th class="header-text">Details</th>
            <th class="header-text">Load Files</th>
        </tr>
        </thead>
        <tbody ng-show="$ctrl.respuesta" ng-repeat="s in $ctrl.respuesta">
        <tr>
            <th class="a rows-font" id="tests">{{s.Id}}</th>
            <th class="rows-font">{{s.Name}}</th>
            <th class="rows-font">{{s.CreationDate}}</th>
            <th class="rows-font">
                <button type="button" class="btn btn-success" ng-click="$ctrl.modalPop(); $ctrl.getDetails()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </th>
            <th class="rows-font">
                <button type="button" class="btn btn-success" ng-click="submitted = true">
                    <span class="glyphicon glyphicon-paperclip"></span>
                </button>
            </th>
        </tr>
        </tbody>
    </table>
</div>

这是模态的 HTML:

<div class="modal" id="myModal2" ng-repeat="s in $ctrl.respuesta">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel"><b>Request {{s.Id}}</b></h5>
                </div>
                <div class="modal-body">
                    <ul>

                    <li><b>ORDER: </b>{{s.OrderId}}</li>
                    <li><b>NAME: </b>{{s.Name}}</li>
                    <li><b>ID USER: </b>{{s.RFC}}</li>
                    <li><b>ADRESS: </b>{{s.Adress}}</li>
                    <li><b># EXT: </b>{{s.NoExt}}</li>
                    <li><b># INT: </b>{{s.NoInt}}</li>
                    <li><b>DISTRICT: </b>{{s.District}}</li>
                    <li><b>CP: </b>{{s.CP}}</li>
                    <li><b>MUNICIPALITY: </b>{{s.Municipality}}</li>
                    <li><b>STATE: </b>{{s.State}}</li>
                    <li><b>DATE REQUEST: </b>{{s.CreationDate}}</li>
                    <li><b>COUPONS: </b>
                        <ul>
                            <li>{{s.Coupon}}</li>
                        </ul>
                    </li>
                    <li><b>INVOICE(S): </b>
                        <ul>
                            <li><a href="" target="_blank">{{s.Coupon}}</a></li>
                        </ul>
                    </li>
                </ul>
                <button type="button" class="btn btn-danger" ng-click="submitted = true">
                    <label><strong>Download Files </strong></label>
                    <span class="glyphicon glyphicon-cloud-download"></span>
                </button>
            </div>
            <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

正如我所见，我只捕获 API 中的第一个值。我该怎么做才能从模式内部的列表中捕获每个 s.Id ，以显示该特定 ID 中的每个数据？我正在使用 AngularJS、Javascript 和 Bootstrap。

Answer 1

您的表格包含以下行:ng-repeat="s in $ctrl.respuesta"

对于每一行，您都有按钮:

<button type="button" ng-click="$ctrl.modalPop(); $ctrl.getDetails()">
       <span class="glyphicon glyphicon-plus"></span>
</button>

我不知道您的所有代码，但更好的方法是将 s 传递给 $ctrl.modalPop()。 A.e.

<button type="button" ng-click="$ctrl.modalPop(s); $ctrl.getDetails(s)">
       <span class="glyphicon glyphicon-plus"></span>
</button>

此外，不要使用 jQuery 打开 bootstrap。使用Angular based Bootstrap modal