使用 json 数据并将其显示在列中
Posted
技术标签:
【中文标题】使用 json 数据并将其显示在列中【英文标题】：Consuming json data and displaying it in columns 【发布时间】：2018-08-20 20:38:57 【问题描述】：我想通过angular js显示如下图所示的json数据。
https://randomuser.me/api/?results=30&nat=US
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 当用户被点击时，我们会显示他的图像，而图像的其余部分就像我附加的图像一样以上是关于使用 json 数据并将其显示在列中的主要内容，如果未能解决你的问题，请参考以下文章
识别包含单词的句子，并使用 str.contains 在列中显示该单词