I'm trying to create a list, getting info from an API. When someone click on a button from any value of that list, a modal will appear an show the details of that specific value.
The list is working, but, when I'm trying to show the info of the specific value, only shows the very first info on every modal.
This is my code so far:
(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
brings the data from the API, and
vm.modalPop
Open the modal (I'm using bootstrap).
This is my HTML for the list:
<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>
And This is the HTML for modal:
<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>
As I see, I'm only catching the first value from the API. What can I do to catch every s.Id from the list inside of the modal, to show every data from that specific Id? I'm using AngularJS, Javascript and Bootstrap.
