user3599620 user3599620 - 25 days ago 14
AngularJS Question

Angularjs: How to display two nested lists in table?

I have two nested lists. How can I display them to look like this:

1 Brett Software Engineer Apple

2 Steven Database Administrator Google

I want it to be displayed in table.

Controller.js

var controllers = angular.module('MyApp.controllers', [])
controllers.controller('MyController', function ($scope) {


$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];

$scope.companyList = [{
name: 'Apple',
slug: 'Apple'
}, {
name: 'Google',
slug: 'Google'
}, {
name: 'Microsoft',
slug: 'Microsoft'
}, {
name: 'Facebook',
slug: 'Facebook'
},

];

});


I looked tutorials but I couldn't find suitable solution.
Thanks!

Answer
<div ng-repeat="c in clients">
      <tr>
      <td>{{$index+1}}</td>
      <td>{{c.name}}</td>
      <td>{{c.designation}}</td>
      <td>{{c.company.name}}</td>
      </tr>
    </div>

Here is your requirement

Comments