gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 14:01:08 25 4
gpt4 key购买 nike

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

  • 我有一个带有唯一 ID 的图书初始列表,我需要列出该列表。最初列出的数据是图书标题和发布日期(ID 仅用于生成列表 href)。
  • 当点击一本书时,它会调用一个函数来获取该书的额外数据以进行显示。
  • 在点击的图书内部,我有另一个功能,可以将上述所有数据重复到两个选项卡中(选项卡一用于图书放映,选项卡二用于评论)。

我的问题:当我尝试将图书 ID 传递到函数调用时,它会尝试迭代我的整个图书列表(500k + 图书),并且不会调用该特定 ID,我认为这是由于 Angular 未正确写出 HTML 并刷新造成的list.bookId

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

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

但无法正确传递,因为后端需要这种格式:

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

所以为了做到这一点,我需要在前端执行此操作:

ng-click="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>

最佳答案

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

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

关于javascript - AngularJS 将字符串从 ng-repeat 列表传递到前端函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40407180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com