我正在尝试创建一个列表，从 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。
最佳答案
您的表格包含以下行: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
关于javascript - 从列表中获取值 (API)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46283669/