AngularJS 将字符串从 ng-repeat 列表传递到前端函数答案

【问题标题】：AngularJS Pass String into Frontend Function From ng-repeat ListAngularJS 将字符串从 ng-repeat 列表传递到前端函数
【发布时间】：2016-11-03 16:54:32
【问题描述】：

我有一个包含成百上千本书的项目，并且我正在使用 Java Rest 后端来查询数据库（也使用引导程序）：

我有一个需要列出的具有唯一 ID 的初始图书列表。最初列出的数据是书名和出版日期（ID 仅用于生成列表 href）。
当点击一本书时，它会调用一个函数来抓取该书的额外数据以显示。
在被点击的书内，我有另一个功能，它将所有上述数据重复到两个选项卡中（选项卡一用于图书展示，选项卡二用于 cmets）。

我的问题： 是当我尝试将图书 ID 传递给函数调用时，它会尝试遍历我的整个图书列表（500k + 图书）并且不调用该特定 ID，我认为这是由于角度未正确写出 HTML 并刷新list.bookId

我尝试了 ng-click="getExtraBookInfo({{list.bookId}})"，它创建了：

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

但没有正确传入，因为后端需要这种格式：

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

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

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

这在上面的函数调用中可以正常工作，但转发器列表永远不会在选项卡中进一步写出 html。

当我调试代码时，它实际上将 {{list.bookId}} 作为 Id 传递，即使在 getExtraBookInfo() 调用中也是如此！

注意：在我的 services.js 中，我使用 http.get 并将 bookId 附加到 URL。

总体代码：

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

【问题讨论】：

ng-click 会在您的作用域的上下文中评估表达式，因此 {{ }} 插值不会达到预期的结果。尝试省略车把

标签： javascript jquery angularjs twitter-bootstrap list

【解决方案1】：

就这样吧，作为参数传递时不需要使用表达式

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

【讨论】：

【解决方案2】：

找到我的问题。首先，像 William B 和 Sajeetharan 说我不需要 {{}}，但我发现我的 SQL 在 null 上传递了所有内容。这导致我发现我的休息服务没有从 get url 中获取 bookId，因为我没有正确实现 @PathParam。

https://www.mkyong.com/webservices/jax-rs/jax-rs-pathparam-example/

谢谢大家！

【讨论】：