My angular cellar app

by Luiza CICONE

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">
<div class="content" ng-app ng-controller="Ctrl as vm">
  <ul>
    <li ng-repeat="consultant in vm.myData">{{consultant.villeResidence}}</li>
  </ul>

  <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="">
        <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, $http, 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: 'CDD',
      id: 2
    }]
  }];

  self.myData = data;

  self.tableParams = new NgTableParams({}, {
    dataset: data
  });
});