Профили пользователей

Сниппет загрузки профилей юзеров и открытие окна с деталями при помощи плагина AngularJS и Bootstrap 3, используется API.

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<style>
 body {
 background-color: #fff;
 color: #444;
 }
 
 .fa {
 color: #eee;
 }
 
 #userList {
 display: none;
 }
 
 #loader {
 position: absolute;
 z-index: 2;
 width: 100%;
 text-align: center;
 top: 40%;
 }
</style>



<i class="fa fa-spin fa-refresh fa-5x" id="loader"></i>
<div class="container" ng-app="myApp" ng-controller="Main">
 <div class="row" id="userList">
 <div ng-repeat="u in users" class="col-xs-4 col-sm-2">
 <a href="" ng-click="showUserModal($index)"><img src="{{u.user.picture.large}}" class="img-thumbnail img-responsive img-circle"></a>
 <h3 class="text-center">{{u.user.name.first}}</h3>
 <hr>
 </div>
 </div>
 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header bg-info">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
 <h1 id="myModalLabel" class="text-center"></h1>
 </div>
 <div class="modal-body">
 <div class="container-fluid">
 <div class="row">
 <div class="col-xs-4 col-xs-offset-4"><img src="{{currUser.picture.large}}" class="img-thumbnail img-responsive img-circle"></div>
 </div>
 <hr>
 <div class="row">
 <h4 class="text-center"><i class="fa fa-fw fa-map-marker fa-2x"></i> {{currUser.location.street}} {{currUser.location.city}}, {{currUser.location.state}}</h4>
 <h4 class="text-center"><i class="fa fa-fw fa-phone fa-2x"></i> {{currUser.cell}}</h4>
 <h4 class="text-center"><i class="fa fa-fw fa-envelope-o fa-2x"></i> {{currUser.email}}</h4>
 <h4 class="text-center"><i class="fa fa-fw fa-user fa-2x"></i> {{currUser.username}}</h4>
 </div>
 </div>
 </div>
 <div class="modal-footer bg-info">
 <button class="btn btn-lg btn-default center-block" data-dismiss="modal" aria-hidden="true">Okay!</button>
 </div>
 </div>
 </div>
 </div>
 <!--/modal-->
</div>
<!--/container-->
<script type='text/jаvascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/jаvascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type='text/jаvascript' src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script>
 var myApp = angular.module('myApp', []);

 function Main($scope, $http) {
 $http.get('https://api.randomuser.me/?results=20').success(function(data) {
 $scope.users = data.results;
 $('#loader').hide();
 $('#userList').show();
 }).error(function(data, status) {
 alert('get data error!');
 });
 $scope.showUserModal = function(idx) {
 var user = $scope.users[idx].user;
 $scope.currUser = user;
 $('#myModalLabel').text(user.name.first + ' ' + user.name.last);
 $('#myModal').modal('show');
 }
 }
 //$(document).ready(function() {});
</script>