javascript – Angular JS用户配置文件网格

2019年8月6日 151次阅读

我找到了一个我想在这里做的例子：

http://www.bootply.com/fzLrwL73pd

看起来这个例子是使用randomUser api生成随机用户信息和图片.我想创建一些非常类似的东西,但我手动输入静态信息.我尝试手动将信息输入到数组中,如下所示：

 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');
  }

}

有没有办法轻松将此模板转换为更静态的内容？

预先感谢您的任何帮助！

最佳答案 可能很疯狂,但如果您正在寻找更多静态内容,是否可以窃取输出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来调用它们？

点赞