AngularJS将字符串传递到ng-repeat列表中的前端函数

时间:2016-11-03 16:54:32

标签: javascript jquery angularjs twitter-bootstrap list

我有一个包含数百到数千本书的项目,我正在使用Java Rest后端来查询数据库(也使用bootstrap):

  • 我有一份初始列表,其中包含我需要列出的唯一ID。最初列出的数据是书籍标题和发布日期(ID仅用于生成列表hrefs)。
  • 点击一本书时,它会调用一个函数来获取要显示的额外数据。
  • 在点击的书的内部,我有另一个功能,将所有上述数据重复到两个标签中(标签显示标签一,标注标签二)。

我的问题: 当我尝试将书籍ID传递给函数调用时,它会尝试遍历我的整个书籍列表(500k +书籍)并且不会调用该特定ID,我相信这是由于角度不正确地写出HTML并刷新list.bookId

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

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

但是没有正确传入,因为后端期望这种格式:

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

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

纳克单击=" getExtraBookInfo(' {{list.bookId}}')"

这在上面的函数调用中正常工作,但转发器列表永远不会在选项卡中向下写出html。

当我调试代码时,它甚至在getExtraBookInfo()调用上传递 {{list.bookId}} 作为Id!

注意:在我的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>

2 个答案:

答案 0 :(得分:2)

就这样做,在作为参数传递时不需要使用表达式

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

答案 1 :(得分:0)

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

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

谢谢大家!