Angular JS User Profile Profile

Question

I found an example of what I would like to do here:

http://www.bootply.com/fzLrwL73pd

It looks like this example uses randomUser api to generate random user data and images. I want to create something very similar to this, but with static information that I manually entered. I tried to manually enter the information into the array as follows:

 var myApp = angular.module('myApp', [{"user":{"gender":"female","name":{"title":"mrs","first":"taylor","last":"griffin"},"location":{"street":"2822 w 6th st","city":"everett","state":"oregon","zip":"80020"},"email":"[e-mail]","username":"yellowswan550","password":"twiggy","salt":"UV3zFgdW","md5":"ceb4dbcf76444647f32b059dc3fc1280","sha1":"23ae9f24c4fd1d09e12c95bd75029ea850db3fb6","sha256":"09b6a019187249e1eff7ca736865ddb6f01567dbe20774872c3115a6cbbd6ae4","registered":"1185248430","dob":"328410973","phone":"(199)-530-3414","cell":"(441)-597-7462","SSN":"961-26-7598","picture":{"large":"http://api.randomuser.me/portraits/women/82.jpg","medium":"http://api.randomuser.me/portraits/med/women/82.jpg","thumbnail":"http://api.randomuser.me/portraits/thumb/women/82.jpg"},"version":"0.5","nationality":"US"},"seed":"81aa9d006e130994"}]);
function Main(myApp){    
    $('#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');
  }

}  

Is there a way to easily convert this template to more static content?

Thank you in advance for your help!

Answer 1

Thanks for all the answers; however, I think I finally figured it out!

, (getboostrap.com/javascript). . :

 <!-- image trigger modal -->
<a href="#" data-toggle="modal" data-target="#testModal">
  <img class="img-responsive staffimg" src="images/profile.png">
</a>


  <div id="testModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="testLabel" 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">×</button>
            <h1 id="testLabel" 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="images/profile.png" class="img-thumbnail img-responsive img-circle"></div>
            </div>
            <hr>
            <div class="row">
              <h4 class="text-center"><i class="fa fa-fw fa-phone fa-2x"></i> Phone:&nbsp;555-555-5555 ect 555</h4>
              <h4 class="text-center"><i class="fa fa-fw fa-envelope-o fa-2x"></i> Email:<a href="mailto:[e-mail]> [e-mail]</a></h4>
              <h4 class="text-center"><i class="fa fa-fw fa-user fa-2x"></i> penguins66</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-->

Answer 2

, , HTML ?

, :

<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 :

<div class="row" id="userList">
    <div class="col-xs-4 col-sm-2">
        <a href=""><img src="/001.jpg" class="img-thumbnail img-responsive img-circle"></a>
        <h3 class="text-center">User #1</h3>
        <hr>
    </div>
    <div class="col-xs-4 col-sm-2">
        <a href=""><img src="/002.jpg" class="img-thumbnail img-responsive img-circle"></a>
        <h3 class="text-center">User #2</h3>
        <hr>
    </div>
</div>

JS ?

Answer 3

var myApp = angular.module('myApp', [{ "user": { "gender": "female"..); . - . . - . , $scope.users = [ ]. . .

var myApp = angular.module('myApp', []);
    function Main($scope, $http){
      
      $scope.users = [{"user":{"gender":"female","name":{"title":"mrs","first":"taylor","last":"griffin"},"location":{"street":"2822 w 6th st","city":"everett","state":"oregon","zip":"80020"},"email":"[e-mail]","username":"yellowswan550","password":"twiggy","salt":"UV3zFgdW","md5":"ceb4dbcf76444647f32b059dc3fc1280","sha1":"23ae9f24c4fd1d09e12c95bd75029ea850db3fb6","sha256":"09b6a019187249e1eff7ca736865ddb6f01567dbe20774872c3115a6cbbd6ae4","registered":"1185248430","dob":"328410973","phone":"(199)-530-3414","cell":"(441)-597-7462","SSN":"961-26-7598","picture":{"large":"http://api.randomuser.me/portraits/women/82.jpg","medium":"http://api.randomuser.me/portraits/med/women/82.jpg","thumbnail":"http://api.randomuser.me/portraits/thumb/women/82.jpg"},"version":"0.5","nationality":"US"},"seed":"81aa9d006e130994"}];
        $('#loader').hide();
        $('#userList').show();
      
      $scope.showUserModal = function(idx){
        var user = $scope.users[idx].user;
        $scope.currUser = user;
        $('#myModalLabel').text(user.name.first
             + ' ' + user.name.last);
        $('#myModal').modal('show');
      }
     
    } 

Hide result