My angular cellar app
HTML
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.8.3/ng-table.min.css">
<script src="https://cdn.jsdelivr.net/lodash/4.7.0/lodash.min.js"></script>
<div class="content" ng-app ng-controller="Ctrl as vm">
<table ng-table="vm.tableParams" show-filter="true" class="table table-striped table-bordered table-hover" id="dynamic-table">
<tr ng-repeat="consultant in $data">
<td class="text-center" data-title="'Ville résidence'" filter="{ 'villeResidence': 'text' }">{{consultant.villeResidence}}</td>
<td class="text-center" data-title="'Contrat'" filter="{ 'contrats': 'text' }">
<span ng-repeat="typeContrat in consultant.typeContrats">
<a class="form-control-static" href="#">{{typeContrat.contrat}}</a>
{{$last ? '' : ', '}}
</span>
</td>
</tr>
</table>
</div>
JavaScript
var myApp = angular.module('app', ["ngTable"]);
myApp.controller('Ctrl', function($scope, $filter, NgTableParams) {
var self = this;
var data = [{
villeResidence: "France",
typeContrats: [{
contrat: 'CDI',
id: 1
}, {
contrat: 'CDD',
id: 2
}]
}, {
villeResidence: "France",
typeContrats: [{
contrat: 'CDI',
id: 1
}, {
contrat: 'CDD',
id: 2
}]
}, {
villeResidence: "GB",
typeContrats: [{
contrat: 'CDI',
id: 1
}, {
contrat: 'Freelance',
id: 2
}]
}];
_.forEach(data, function(value) {
var contrats = _.map(value.typeContrats, 'contrat');
value.contrats = _.join(contrats, ', ');
});
self.myData = data;
self.tableParams = new NgTableParams({}, {
getData: function($defer, params) {
console.log(params.filter());
var filteredData = !_.isEmpty(params.filter()) ? $filter('filter')(data, params.filter()) : data;
$defer.resolve(filteredData);
}
});
});