<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <i class="fa fa-spin fa-refresh fa-5x" id="loader"></i> <div class="container" ng-app="myApp" ng-controller="Main"> <h2>AngularJS Example - Expanding Details Row</h2> <h4>via <a href="">RandomUser.me</a> API + <a href="http://www.bootply.com/ffa8qGvfNj">Bootply</a></h4> <hr> <div class="container" id="userList"> <div class="row" ng-repeat-start="u in users" ng-click="showDetail(u.user)" ng-class-odd="'alt'"> <div class="col-xs-1 text-center"><img title="{{u.user.name.first}}" src="{{u.user.picture}}" class="img-thumbnail img-responsive img-circle"></div> <div class="col-xs-3 cap">{{u.user.name.first}}</div> <div class="col-xs-2 strong">{{u.user.username}}</div> <div class="col-xs-2">{{u.user.phone}}</div> <div class="col-xs-2">{{u.user.location.state}}</div> <div class="col-xs-2 text-right"><a href=""><i ng-hide="active==u.user.username" class="fa fa-plus fa-3x"></i><i ng-show="active==u.user.username" class="fa fa-minus fa-3x"></i></a></div> </div> <div class="row" ng-repeat-end="" ng-show="active==u.user.username" ng-class-odd="'alt'"> <div class="col-xs-12"><h2 class="cap">{{u.user.name.first}} <i ng-show="u.user.gender=='female'" class="fa fa-female"></i><i ng-show="u.user.gender=='male'" class="fa fa-male"></i></h2></div> <div class="col-md-3 col-xs-6 small"> <label>Username</label> {{u.user.username}}<br> <label>Registered</label> {{u.user.registered | date:'MM/dd/yyyy'}}<br> <label>Email</label> {{u.user.email}} </div> <div class="col-md-3 col-xs-6 small"> <label>Address</label> {{u.user.location.street}}<br> <label>City</label> {{u.user.location.city}}<br> <label>Zip Code</label> {{u.user.location.zip}}<br> </div> <div class="col-md-3 col-xs-6 small"> <label>Birthday</label> {{u.user.dob | date:'MM/dd/yyyy'}}<br> <label>Phone</label> {{u.user.phone}}<br> <label>Cell</label> {{u.user.cell}}<br> </div> <div class="col-md-2 col-xs-12 text-center"> <img title="{{u.user.name.first}}" src="{{u.user.picture}}" class="img-thumbnail img-responsive img-circle center-block"> </div> <div class="col-xs-12"><hr></div> </div> </div><!--/row--> <hr> </div><!--/container-->

body { background-color: #eee; color:#444; } .fa { color:#666; } hr { border-color: transparent; } #userList { display:none; } #loader { position:absolute; z-index:2; width:100%; text-align:center; top:40%; } .cap:first-letter { text-transform: uppercase; } .alt { background-color:#ccc; }

var myApp = angular.module('myApp', []); function Main($scope, $http){ $http.get('https://api.randomuser.me/0.4/?results=20').success(function(data) { $scope.users = data.results; $('#loader').hide(); $('#userList').show(); }).error(function(data, status) { alert('get data error!'); }); $scope.showDetail = function (u) { if ($scope.active != u.username) { $scope.active = u.username; } else { $scope.active = null; } }; $scope.doPost = function() { $http.get('http://api.randomuser.me/0.4/').success(function(data) { var newUser = data.results[0]; newUser.user.text = $('#inputText').val(); newUser.date = new Date(); $scope.users.push(newUser); }).error(function(data, status) { alert('get data error!'); }); } } //$(document).ready(function() {});