angular-people/MasonryLayout.html at gh-pages · stemlabs/angular-people · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html ng-app="demoApp">

<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body ng-controller="demoController">
  <div masonry ng-hide="showDetail">
    <div class="masonry-brick col-sm-6 col-md-4 col-lg-3" ng-repeat="person in people">
      <div class="panel panel-default">
        <div class="panel-heading">{{ person.name }}</div>
        <div class="panel-body">Age: {{ person.age }}</div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>
  <script src="https://passy.github.io/angular-masonry/bower_components/imagesloaded/imagesloaded.js"></script>
  <script src="https://passy.github.io/angular-masonry/angular-masonry.js"></script>

  <script>
    var masonryapp = angular.module('masonryapp', ['wu.masonry']);
    masonryapp.controller('demoController', function ($scope) {
      $scope.people = [{"name": "Isaac", "age": "8"}, {"name": "AJ", "age": "5"}];
    });
  </script>
</body>
</html>