Ng-repeat within an ng-repeat-start

Question

My data:

$scope.members = [
 {
    projects: [...]
 },
 {
    projects: [...]
 }, ...
] // $scope.members.length == 15

My code:

<tr>
    <th ng-repeat-start="member in members" ng-repeat="project in member.projects" ng-repeat-end  ng-if="member.projects" >
        {{project.name}}
    </th >
</tr>

No element is generated. I checked the Elements in Chrome developer tool, and I found these in the <tr> tag comments like this:

<!-- ngRepeat: member in members -->

<!-- ngRepeat: member in members -->
<!-- end ngRepeat: member in members --> (x30)

I also tried this:

<tr ng-repeat-start="member in members">
        <th  ng-repeat="project in member.projects" ng-repeat-end  ng-if="member.projects" >
            {{project.name}}
        </th >
</tr>

But then I have the error: Unterminated attribute, found 'ng-repeat-start' but no matching 'ng-repeat-end' found.

Does anyone have an idea? Thanks in advance.

Answer 1

Updated answer:

Get only the 'projects' arrays into a new array, like so:

$scope.projectsOnly = [];//empty array
$scope.members.forEach(function(item){
        $scope.projectsOnly.push(item.projects);
})

and then loop only into that array, like so:

<tr>
    <th ng-repeat="project in projectsOnly " >
        {{project.name}}
    </th >
</tr>

Hope helps, good luck.

Answer 2

You should simply do this with nested ng-repeat

<tr ng-repeat="member in members">
    <th ng-repeat="project in member.projects" ng-if="member.projects">
        {{project.get('name')}}
    </th>
</tr>

Answer 3

you don't need the ng-if, and you shouldn't separate the ng-repeat start/end. Just use two ng-repeats, one inside the other:

<div ng-app="app">
    <table ng-controller="TestController">
        <tr ng-repeat="member in members">
      <th ng-repeat="project in member.projects">
        {{project.name}}
      </th>
    </tr>
  </table>
</div>

and your controller can look like this:

var app = angular.module('app', []);

app.controller('TestController', function($scope) {
  $scope.members = [{
    projects: [{
      name: '1'
    }, {
      name: '2'
    }]
  }, {
    projects: [{
      name: '3'
    }, {
      name: '4'
    }]
  }];
});