模态显示角度 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。 现在我无法弄清楚为什么当我单击模态按钮时只显示第一个元素。

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"> 

该语句本身已磨损，因为 div 上的 ng-model 给出了非分配异常。并且 ng-model 不接受条件，它只保存您的模态对象。

你可以试试这个。它可能会对你有所帮助。

<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>

您的角度代码保持不变。

谢谢。