Modal顯示角度ng-repeat數組中的第一個元素

Question

此Html代碼有助於在卡片塊中重複出公司配置文件。

<div class="container-fluid" id="gallery" ng-controller="ComController" style="padding-top: 2em;"> 
     <h1 class="display-4 text-center" style="margin-bottom: 1em;">Campus Recruiters</h1> 
     <div class="row"> 
     <div class="col-4" ng-repeat="company in companies"> 
      <div class="card" style="margin-bottom: 2em;"> 

      <img class="card-img-top img-fluid" ng-src="{{company.com_logo}}" alt="Card image cap"> 
      <div class="card-block"> 

       <h5 class="card-title">{{company.com_name}}</h5> 
       <p class="card-text">{{company.com_abt}}</p> 
       <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" ng-click="setSelectedItem(company)">About {{company.com_name}}</button> 
      <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" > 
        <div class="modal-dialog modal-lg" ng-model="selectedItem == company"> //Button to actiavte modal 
         <div class="modal-content"> 
         <div class="modal-header"> 
          <h5 class="modal-title" id="exampleModalLabel">{{company.com_name}}</h5> 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
          <span aria-hidden="true">&times;</span></button> 
         </div>     
         </div> 
        </div> 
        </div> 


      </div> 
      </div> 

     </div> 
     </div> 
    </div> 

這是我使用的ComController。 現在我不知道爲什麼只有第一個元素顯示wheni點擊按鈕模態。

app.controller('ComController', ['$scope', function($scope){ 


    $scope.setSelectedItem = function(item) { 
     $scope.selectedItem = item; 
    }; 


    $scope.companies = [ 

     { 

      com_logo: 'recruit_icons/tcs_logo.png', 
      com_name: 'Tata Consultancy Services', 
      com_abt: 'I am this company', 
     }, 
     { 
      com_logo: 'recruit_icons/hcl_logo.png', 
      com_name: 'Hindustan Computers Limited', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/hp_logo.png', 
      com_name: 'Hewlett Packard', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/ion_logo.png', 
      com_name: 'Ion Trading', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/niit_logo.png', 
      com_name: 'NIIT Technologies', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/techm_logo.png', 
      com_name: 'Tech Mahindra', 
      com_abt: 'I am this company', 
     }, 
     { 
      com_logo: 'recruit_icons/tcs_logo.png', 
      com_name: 'Tata Consultancy Services', 
      com_abt: 'I am this company', 
     }, 
     { 
      com_logo: 'recruit_icons/hcl_logo.png', 
      com_name: 'Hindustan Computers Limited', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/hp_logo.png', 
      com_name: 'Hewlett Packard', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/ion_logo.png', 
      com_name: 'Ion Trading', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/niit_logo.png', 
      com_name: 'NIIT Technologies', 
      com_abt: 'I am this company', 
     },{ 
      com_logo: 'recruit_icons/techm_logo.png', 
      com_name: 'Tech Mahindra', 
      com_abt: 'I am this company', 
     }]; 


}]); 

Answer 1

試試這個。

<div ng-controller="ComController"> 
<div ng-repeat="item in companies"> 
<img class="card-img-top img-fluid" ng-src="{{item.com_logo}}" alt="Card 
image cap"> 
    <div class="card-block" > 
     <h5 class="card-title">{{item.com_name}}</h5> 
     <p class="card-text">{{item.com_abt}}</p> 
     <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" ng-click="setSelectedItem(company)">About {{item.com_name}}</button> 
    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" > 
      <div class="modal-dialog modal-lg" ng-model="selectedItem == company"> //Button to actiavte modal 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <h5 class="modal-title" id="exampleModalLabel">{{item.com_name}}</h5> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
        <span aria-hidden="true">&times;</span></button> 
       </div>     
       </div> 
      </div> 
      </div> 

     </div> 
    </div> 
    </div> 

Answer 2

乍一看，我在你的html中發現了一些小錯誤。

<div class="modal-dialog modal-lg" ng-model="selectedItem == company"> 

該聲明本身worng ng-ng模型div給不分配異常。而ng模型不會聲明它只包含模態對象的條件。

你可以試試這個。它可能會幫助你。

<div ng-controller="ComController"> 
    <div ng-repeat="item in companies"> 
    <div class="card-block" > 
     <h5 class="card-title">{{item.com_name}}</h5> 
     <p class="card-text">{{item.com_abt}}</p> 
     <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg" ng-click="setSelectedItem(item)">About {{item.com_name}}</button> 
     <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" > 
      <div class="modal-dialog modal-lg" ng-if="selectedItem.com_name == item.com_name"> //Button to actiavte modal 
       <div class="modal-content" style="color: lightblue"> 
        <div class="modal-header"> 
         <h5 class="modal-title" id="exampleModalLabel">{{item.com_name}}</h5> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
         <span aria-hidden="true">&times;</span></button> 
        </div>     
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

你的角碼保持不變。

謝謝。