Angularjs 模态显示了角ng重复序列中的第一个元素

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

试试这个

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

{{item.com_name}
{{item.com\u abt}
关于{{item.com_name}
//激活模式的按钮
{{item.com_name}
&时代；

乍一看，我在您的html中发现了一些小错误

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

语句本身在div give non assign异常上作为ng模型工作。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>

{{item.com_name}
{{item.com\u abt}
关于{{item.com_name}
//激活模式的按钮
{{item.com_name}
&时代；

角度代码保持不变

---

谢谢。

我在你的HTM中没有看到任何

ng repeat

，我认为你的ng点击应该更改为传递公司名称或任何独特的内容，以弹出相应的公司，而不是传递公司对象itself@tanmay它就在按钮的标签上。我试过了，但只有第一个元素是通过模态打开的，而其他人只是给了我一个黑色的覆盖层，这对我很有效。您的问题可能是CSS或其他问题。那么，您能否提供关于JSFIDLE的示例，以便我能够确切地了解问题所在。ThanksIt正在执行与我的代码相同的操作。仅具有第一个元素的打开模式。

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