AngularJS将字符串从ng-repeat List传递给前端函数

我有一个有数百到数千本书的项目，我使用Java Rest后端来查询DB(也使用bootstrap):

• 我有一个具有唯一ID的图书的初始列表，我需要列出。最初列出的数据是书名和出版日期(ID仅用于生成列表)。
• 当一个书被点击时，它调用一个函数来获取额外的数据来显示。
• 在点击的书中，我有另一个函数，将上述所有数据重复到两个选项卡中(选项卡1用于书籍显示，选项卡2用于评论)。

当我试图将图书ID传递到函数调用时，它试图迭代我的整个图书列表(500k +图书)，并且不调用特定的ID，我认为这是由于angular没有正确地写出HTML并刷新列表。bookId

我试过ng-click="getExtraBookInfo({{list.bookId}}) "创建:

ng-click = " getExtraBookInfo(34234234——34234234)"

但是没有正确传递，因为后端需要这种格式:

ng-click = " getExtraBookInfo(34234234——34234234)"

所以为了做到这一点，我需要在前端这样做:

ng-click = " getExtraBookInfo("{{list.bookId}}")"

这在上面的函数调用中工作得很好，但是repeater列表永远不会在制表符中进一步写出html。

当我调试代码时，它实际上是传递{{list。作为getExtraBookInfo()调用的Id !

注意:在我的services.js中，我使用http。

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default" ng-repeat="list in bookList" ng-controller="BookListController">
    <div class="panel-heading" role="tab" id="heading_{{list.bookId}}">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#panel_{{list.bookId}}" aria-expanded="true" aria-controls="panel_{{list.bookId}}" ng-click="getExtraBookInfo({{list.bookId}})">
          {{list.bookTitle}} - {{list.bookDate}}
        </a>
      </h4>
    </div>
    <div id="panel_{{list.bookId}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading_{{list.bookId}}">
      <div class="panel-body">
        <ul class="nav nav-tabs">
          <ul class="nav nav-tabs">
            <li role="presentation" class="active"><a href="#showings_{{list.bookId}}" aria-controls="showings" role="tab" data-toggle="tab">Showings</a>
            </li>
            <li role="presentation"><a href="#comments_{{list.bookId}}" aria-controls="comments" role="tab" data-toggle="tab">Comments</a>
            </li>
          </ul>
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="showings_{{list.bookId}}">
              <table class="table">
                <thead>
                  <th>Showing</th>
                  <th>Location</th>
                </thead>
                <tbody>
                  <tr ng-repeat="book in getBookDataById({{list.bookId}})">
                    <td>{{book.showingName}}</td>
                    <td>{{book.showingLocation}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

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