Bootstrap Snippet Angularjs nested table when clicked row record sub table open! using HTML CSS Bootstrap jQuery

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
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
33
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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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
33
34
35
36
37
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!');
      
    });
    
  }
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Angularjs nested table when clicked row record sub table open!"
Bootstrap 3.3.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs nested table when clicked row record sub table open!" Bootstrap 3.3.0 Snippet by muhittinbudak

Related: See More

Questions / Comments:

"Angularjs nested table when clicked row record sub table open!"
Bootstrap 3.3.0 Snippet by muhittinbudak