79381

AngularJS - Nested ng-repeat using two objects

Question:

<a href="https://i.stack.imgur.com/WdjAZ.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/WdjAZ.png" data-original="https://i.stack.imgur.com/WdjAZ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Controller:

$scope.init = function(team){ $http.get("/getLeaderByTeamID/"+team.id) .success(function (data, status, headers, config) { // this is the object that I need to list in the table $scope.leader = data; }) .error(function (data, status, header, config) { $log.error("Error!"); });

}

The data-ng-repeat directives in the table:

<table> <thead> <tr> <th>Team</th> <th>Leader</th> </tr> </thead> <tbody> <tr data-ng-repeat="team in teams" data-ng-init="init(team)"> <td>{{team.name}}</td> <td data-ng-repeat="l in leader">{{l.name}}</td> </tr> </tbody>

The logic is as follow:

<ul><li>When every team is listed the init() function will send the object to the controller.</li> <li>In the other side the init() function will make a query with the ID team in order to get its respective leader. </li> <li>The function will return one object and the second ng-repeat directive will list this into its respective team object.</li> </ul>

But as I showed the list is wrong because one same object is listed in every team.

I was thinking create an array into the init() function with every object but I don't know how to concatenate every object in order to create an array.

Any suggestions?

Answer1:

I think you'r just updating $scope.leader value in every request ,so at the end $scope.leader will have the same value for all teams. try this.

$scope.init = function(teamId){ $http.get("/getLeaderByTeamID/"+teamId) .success(function (data, status, headers, config) { // this is the object that I need to list in the table $scope.leader[teamId] = data; }) .error(function (data, status, header, config) { $log.error("Error!"); }); <table> <thead> <tr> <th>Team</th> <th>Leader</th> </tr> </thead> <tbody> <tr data-ng-repeat="team in teams" data-ng-init="init(team.id)"> <td>{{team.name}}</td> <td data-ng-repeat="l in leader[team.id]">{{l.name}}</td> </tr> </tbody>

or you can use function return leaders array in the second ng-repeat like:

<td data-ng-repeat="l in getLeader(team.id)">{{l.name}}</td>

Recommend

  • Not updating SQL database
  • How to call and pass the parameters to the Servlet using the Java class in my swing application? [du
  • Not able to send json tweets events to Kafka topic/producer using kafka command line
  • Rails 3: Best practices for saving models
  • How can I refresh the entire table sorting cache after dynamic table update?
  • applying background to first, and every third row in a dynamically generated table
  • dynamically set table titles with jquery's Datatables plugin - get titles from data object
  • regex, multiline extract in R
  • Why does the font in these TD elements render at different sizes?
  • garbled css name when styling within UiBinder
  • How to open html table in xls on click of a button
  • saving file generated by TCPDF
  • How to view images from protected folder with php?
  • Textfile Structure (tables)
  • Read a local file using javascript
  • vba code to select only visible cells in specific column except heading
  • Can a Chrome extension content script make an jQuery AJAX request for an html file that is itself a
  • Upload files with Ajax and Jquery
  • Build own AppleScript numerical error handling
  • Websockets service method fails during R startup
  • Google cloud sdk not working when python points python3
  • Delete MySQLi record without showing the id in the URL
  • Unanticipated behavior
  • Is there a mandatory requirement to switch app.yaml?
  • Comma separated Values
  • AngularJs get employee from factory
  • Proper way to use connect-multiparty with express.js?
  • Hits per day in Google Big Query
  • Trying to get generic when generic is not available
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Turn off referential integrity in Derby? is it possible?
  • Linking SubReports Without LinkChild/LinkMaster
  • Add sale price programmatically to product variations
  • XCode 8, some methods disappeared ? ex: layoutAttributesClass() -> AnyClass
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?
  • How do I use LINQ to get all the Items that have a particular SubItem?