如何使用 object.id 显示列表中的 object.name
How to show object.name from a list using object.id
是否有任何选项可以从其他列表中获取成员名称 在基于成员 ID 的表中 ?
(function(){
var app = angular.module('tableApp',[]);
app.controller('tableController', function($scope){
$scope.users = [
{ id: 2, name: 'member2'},
{ id: 5, name: 'member5'},
{ id: 1, name: 'member1'},
{ id: 4, name: 'member4'},
{ id: 3, name: 'member3'}
];
$scope.items = [
{ product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
{ product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
{ product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
{ product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
{ product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
{ product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
];
});
})();
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
<table class="table table-striped table-hover" ng-controller="tableController">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Member</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items ">
<td>{{item.product}}</td>
<td>{{item.date}}</td>
<td>{{users[item.member-1].name}}</td>
</tr>
</tbody>
</table>
</div>
使用索引号,即ng-repeat="(ind, item) ..."
.例:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
<table class="table table-striped table-hover" ng-controller="tableController">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Member</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(ind, item) in items | orderBy : 'rate'">
<td>{{item.product}}</td>
<td>{{item.date}}</td>
<td>{{item.member}}</td>
<td><span ng-repeat="info in users">{{info.id === item.member ? info.name : ''}}</span></td>
</tr>
</tbody>
</table>
</div>
<script>
(function(){
var app = angular.module('tableApp',[ ]);
app.controller('tableController', function($scope){
$scope.users = [
{ id: 2, name: 'member2'},
{ id: 5, name: 'member5'},
{ id: 1, name: 'member1'},
{ id: 4, name: 'member4'},
{ id: 3, name: 'memeber3'}
];
$scope.items = [
{ product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
{ product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
{ product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
{ product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
{ product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
{ product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
];
});
})();
</script>
向范围添加一个方法,用于在给定项目时查找用户:
(function(){
var app = angular.module('tableApp',[ ]);
app.controller('tableController', function($scope){
$scope.users = [
{ id: 2, name: 'member2'},
{ id: 5, name: 'member5'},
{ id: 1, name: 'member1'},
{ id: 4, name: 'member4'},
{ id: 3, name: 'memeber3'}
];
$scope.items = [
{ product: 'Lorem ipsum', date: '12-March-2013', rate: 12.35, member: 1, status: 'approved' },
{ product: 'dolor sit', date: '1-January-2011', rate: 60.54, member: 3, status: 'pending'},
{ product: 'adipisicing', date: '14-November-2014', rate: 0.99, member: 1, status: 'approved'},
{ product: 'do eiusmod', date: '2-November-2014', rate: 4.00, member: 2, status: 'approved'},
{ product: 'culpa qui', date: '1-November-2014', rate: 34.05, member: 1, status: 'pending'},
{ product: 'mollit anim', date: '3-November-2014', rate: 45.00, member: 4, status: 'approved'}
];
$scope.findUser = function(item){
for (var i = 0; i < $scope.users.length; i++) {
user = $scope.users[i];
if (user.id === item.member){
return user;
}
}
}
});
})();
使用该方法查找用户:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="tableApp">
<table class="table table-striped table-hover" ng-controller="tableController">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
<th>Member</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items ">
<td>{{item.product}}</td>
<td>{{item.date}}</td>
<td>{{findUser(item).name}}</td>
</tr>
</tbody>
</table>
</div>
相关文章:
- 要求输入在数据列表中
- 从javascript创建一个列表
- 如何使用jQuery选择下拉列表的值
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- 如何使用json将对象列表从java转换为javascript
- 区分JSON中的矩阵和列表列表
- jQuery表单添加不适用于下拉列表
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- jQuery:将 JSON-Object 转换为 HTML 列表改进
- Object.keys,如何在mongodb中获取键列表
- 如何使用 object.id 显示列表中的 object.name
- 从Object返回唯一键列表的正确方法
- 如何在JSON模型中将Aggregate列表绑定到Object而不是数组
- 列表中的jquery ajax[object object][object object]输出
- 如何创建一个javascript函数,输出一个带有object's属性列表的对象列表
- timeymce列表框onsubmit给出[object object]而不是value
- jquery append只添加列表的第一个元素或显示错误[object object]
- ie9中的Javascript对象列表无法继承Object.prototype