LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



  
  
  Ionic Profile
  
  



  
    
      

Ionic Profile

{{user.name}}

{{user.info}}
CSS
.profile-item {
  text-align: center;
}

.profile-picture {
  border: 1px solid rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 100%;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  margin: 0 auto;
  width: 128px;
  height: 128px;
  overflow: hidden;
}

.profile-picture img {
  width: 128px;
  border-radius: 100%;
}

.profile-name {
  padding-top: 20px;
  font-size: x-large !important;
  font-weight: bold !important;
  text-transform: capitalize;
}
JS
angular.module('starter', ['ionic'])

.controller('ProfileCtrl', function($scope, ProfileSrvc) {

  $scope.user = ProfileSrvc.user_data;

  $scope.logIn = function() {
    ProfileSrvc.get_user_data();
  };

  $scope.logIn();
})

.factory('ProfileSrvc', function(UserService) {
  var userData = {
    name: '',
    info: '',
    icon: ''
  };

  function getUserData() {
    UserService.GetUsers(1).then(function(items) {
      userData.name = items[0].user.name.first + ' ' + items[0].user.name.last;
      userData.info = items[0].user.location.street + ', ' + items[0].user.location.city;
      userData.icon = items[0].user.picture.medium;
    });
  };

  return {
    user_data: userData,
    get_user_data: getUserData
  }
})

.factory('UserService', function($http) {
  var BASE_URL = "http://api.randomuser.me/";
  var items = [];

  return {
    GetUsers: function(count) {
      return $http.get(BASE_URL + '?results=' + count).then(function(response) {
        items = response.data.results;
        return items;
      });
    }
  }
});
Host Instantly Drag and Drop Website Builder

 

Term
Wed, 11/29/2017 - 11:28

Related Codes

Pen ID
Pen ID
Pen ID