When working on my app, I encountered a situation where I needed to retrieve elements from a database and display them using ng-reat. Everything was going smoothly until I realized that within this list, there was another set of data that required a separate call to the database.
I wanted to pass an id to repeat an element based on the number of results returned and display their corresponding data. Here is an example of what I had in mind:
<div ng-repeat="library in libraries">
<p>Read our books:</p>
<p ng-repeat="book in books">{{book.title}}</p>
</div>
My initial thought was to do something like this:
<p ng-repeat="book in getBooks({library.id}) track by $index">{{book.title}}</p>
To achieve this, I planned to use the following function to handle the repeats and values:
$scope.getBooks = function(id){
...execute database query with the provided id...
...update scope to include the retrieved books...
....**magic**...
}
However, I was uncertain about whether this approach would be effective and how to properly update the scope to include the book titles. While I have used similar techniques to repeat a certain number of times before, handling an updated $scope was a new challenge for me.