使用 json 数据并将其显示在列中答案

【问题标题】：Consuming json data and displaying it in columns使用 json 数据并将其显示在列中
【发布时间】：2018-08-20 20:38:57
【问题描述】：

我想通过angular js显示如下图所示的json数据。

https://randomuser.me/api/?results=30&nat=US

json 用户列表

【问题讨论】：

标签： jquery angularjs json

【解决方案1】：

我们可以对结果使用 ng-repeat 逻辑并将其绑定到表

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
  <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="angular.js@1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
  <script>
    (function() {

      angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
        $scope.userData = undefined;
        $scope.selectedUser = undefined;
        $http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
          $scope.userData = response.data;
        });
        $scope.selectUser = function(usr){
          $scope.selectedUser=usr;
        };
      }]);


    }());
  </script>
  <style>
    .userInfo{
      border: 1px solid #ccc;
      margin-top:10px;
      padding:5px;
      cursor: pointer;
    }
    
    .userInfo:hover{
      background: #ccc;
    }
    
    .profile{
      padding-left: 0px;
      padding-right: 0px;
    }
    .ellipsis{
      white-space: nowrap; 
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>

<body ng-app="testApp">
  <div ng-controller="testCtrl">
    <form name="commonForm">
      <div ng-hide="selectedUser">
        <div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
            <img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
            <div class="col-sm-8">
                <div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
                <div class="ellipsis">{{user.email}}</div>
            </div>
        </div>
      </div>
      
      
      
      <div ng-show="selectedUser">
        <button ng-click="selectedUser = undefined">Go Back</button>
        <br />
        <br />
        <img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
        
        <div class="col-sm-4">
          <div class="form-group">
            <label for="first">First Name:</label>
            <input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
          </div>
          
          <div class="form-group">
            <label for="last">Last Name:</label>
            <input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
          </div>
          
          <div class="form-group">
            <label for="username">Login:</label>
            <input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
          </div>
          
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="text" class="form-control" id="email" ng-model="selectedUser.email">
          </div>
          
          <div class="form-group">
            <label for="dob">Date of Birth:</label>
            <input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
          </div>
        </div>
        
        <div class="col-sm-4">
          <div class="form-group">
            <label for="nat">Nationality:</label>
            <input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
          </div>
        </div>
      </div>

    </form>

  </div>
</body>

</html>

【讨论】：

兄弟，我们可以在我的意思是 3 列网格布局的布局中得到这个
两种方式都可以。您不想在表格中显示数据，而是希望它采用 3 列网格布局？
更新了代码 sn-p。请在整页视图中查看
是的，兄弟，当我们单击特定用户时，我们可以在其他页面中获取特定用户数据吗？ imgur.com/a/lMVCn
当用户被点击时，我们会显示他的图像，而图像的其余部分就像我附加的图像一样