リストから値を取得する（API）

Question

APIから情報を取得してリストを作成しようとしています。誰かがそのリストの任意の値からボタンをクリックすると、その特定の値の詳細を表示するモーダルが表示されます。

リストは機能していますが、特定の値の情報を表示しようとすると、すべてのモーダルの最初の情報しか表示されません。 vm.modalPop

(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からデータをもたらし、そして

：

これは私のコードは、これまでのところです

モーダルを開きます（私はブートストラップを使用しています）。

<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です：：

これは、リストのための私の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からの最初の値をキャッチしています。すべてのデータを表示するには、のをモーダルのリストからキャッチするにはどうすればよいですか？ 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> 

私はすべてのあなたのコードを知らないが、より良い方法が$ctrl.modalPop()へsを渡すことです。 A.e.

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

さらに、ブートストラップを開くためにjQueryを使用しないでください。使用Angular based Bootstrap modal