Lance Lance - 1 month ago 11
jQuery Question

AngularJS Pass String into Frontend Function From ng-repeat List

I have a project with hundreds to thousands of books and I am using a Java Rest back-end to query the DB (using bootstrap too):


  • I have an initial list of books with a unique ID that I need to list. Data that gets initially listed are the Books Title and date published (ID is used to generate the lists hrefs only).

  • When an book is clicked it calls a function to grab that books extra data to display.

  • Inside of the clicked book I have another function that repeats all the above data into two tabs (Tab one for the book showings and tab two for the comments).



MY ISSUE:
Is when I try to pass the book ID into the function calls it attempts to iterate through my ENTIRE book list (500k + books) and doesn't call that specific ID which I believe is due to angular NOT writing out the HTML correctly and refreshes the list.bookId

I tried ng-click="getExtraBookInfo({{list.bookId}})" which creates:

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

but doesn't pass in correctly because the backend is expecting this format:

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

so in order to do so I needed to do this on the frontend:

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

This works ok on the above function call but the repeater list never writes out the html further down in the tabs.


When I debug the code it is literally passing {{list.bookId}} as the Id even on the getExtraBookInfo() call!

NOTE: In my services.js I am using http.get with the bookId appended to the URL.

Overall Code:

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



Answer

Just do like this, No need to use expression while passing as a parameter

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