Профили пользователей / AngularJS / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: AngularJS

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 15

Количество символов:

Посмотрели: 2542 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 1 голосов

Тип лицензии: CC BY 4.0

Авторство: http://u.to/R6QtDQ

Информация: Пользователям

Информация: Правообладателям

Теги: бутстрап, сниппет, Bootstrap, Angular, Snippet, ангулар, angularjs

Поделился: IZOTOP

Добавлено: 2015-11-21 в 21:10

Метка: 1582180200

⇄ ⇅

<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>
 
</div>

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type='text/javascript' 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>