persons.html 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <!doctype html>
  2. <html ng-app="eventManApp">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <script src="/static/js/angular.min.js"></script>
  8. <script src="/js/controllers.js"></script>
  9. <title>Event Man(ager)</title>
  10. <link href="/static/css/bootstrap.min.css" rel="stylesheet">
  11. </head>
  12. <body ng-controller="PersonsListCtrl">
  13. <div class="container-fluid">
  14. <div class="row">
  15. <div class="col-md-2">
  16. <!--Sidebar content-->
  17. Search: <input ng-model="query">
  18. Sort by:
  19. <select ng-model="orderProp">
  20. <option value="name">Alphabetical</option>
  21. <option value="id">ID</option>
  22. </select>
  23. </div>
  24. <div class="col-md-10">
  25. <!--Body content-->
  26. <ul class="persons">
  27. <li ng-repeat="person in persons | filter:query | orderBy:orderProp">
  28. <span>{{person.name}}</span>&nbsp;<span>{{person.surname}}</span>
  29. <p>{{person.snippet}}</p>
  30. </li>
  31. </ul>
  32. </div>
  33. </div>
  34. </div>
  35. <script src="/static/js/jquery-2.1.3.min.js"></script>
  36. <script src="/static/js/bootstrap.min.js"></script>
  37. </body>
  38. </html>