javascript - Angular JS User Profile Grid -
i found example of here:
http://www.bootply.com/fzlrwl73pd
it looks example using randomuser api generate random user information , pictures. want create similar static information enter manually. have tried manually entering information array following:
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":"taylor.griffin62@example.com","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 way convert template more static content?
thank in advance help!
may crazy, if looking more static content, possible steal output html , rework fit needs?
looks bit steal below:
<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>
and manually make own div per users:
<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>
then modal popups , use js call them when user clicked?
Comments
Post a Comment