var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.Users = [{
"id": 1,
"display_name": "John Deer",
"role_id": 1,
}, {
"id": 3,
"display_name": "Julie Deer",
}, {
"id": 2,
"display_name": "John Smith",
}];
$scope.Departments = [{
"id": 1,
"created_by_id": 1,
"last_modified_by_id": 2,
"name": "Administrators",
}, {
"id": 2,
"created_by_id": 2,
"last_modified_by_id": 1,
"name": "Guest"
}, {
"id": 3,
"created_by_id": 1,
"last_modified_by_id": 2,
"name": "Manager"
}];
$scope.getUserByID = function(ID) {
console.log('Running getUserByID with: ' + ID + ', as the ID.')
angular.forEach($scope.Users, function(item, index) {
if (ID == item.id) {
console.log('Match is ' + this.Users[index].display_name);
return this.Users[index].display_name;
}
}, $scope);
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css@3.3.6" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-heading clearfix">
<div class="container col-sm-12">
<div class="col-sm-4">
</div>
<div class="col-sm-4">
<div class="form-group">
<input type="text" class="form-control" ng-model="filterDepartments" value="Search" data-toggle="tooltip" data-placement="top" title="Type here to search in the list." placeholder="Search Here">
</div>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
<div class="col-sm-12 well">
<h3>Departments</h3>
<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created By</th>
<th>Modified By</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
<th>Created By</th>
<th>Modified By</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="y in Departments|filter:filterDepartments">
<td>{{y.id}}</td>
<td>{{y.name}}</td>
<td>{{getUserByID(y.created_by_id)}}</td>
<td>{{y.last_modified_by_id}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-12 panel">
<br>
<br>
</div>
<div class="col-sm-12 well">
<h3>Users</h3>
<table id="example" class="display table" style="width: 100%; cellspacing: 0;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="x in Users">
<td>{{x.id}}</td>
<td>{{x.display_name}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
/* Put your css in here */
.well {
background-color: lightgrey;
}