我有一些像json这样的数据：
var data = [{id: 1, name="AB", designation=1},
{id: 2, name="CD", boss= 1, designation=2},
{id: 3, name="EF", boss= 1, designation=2},
{id: 4, name="GH", boss= 1, designation=2},
{id: 5, name="IJ", boss= 2, designation=3},
{id: 6, name="KL", boss= 3, designation=3},
{id: 7, name="MN", boss= 3, designation=3},
{id: 8, name="OP", boss= 7, designation=4},
{id: 9, name="QR", boss= 3, designation=3},
{id: 10, name="ST", boss= 1, designation=2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
在上面的数据通知中，当指定引用不同的数组时，boss字段引用同一个数组。
我想在表格中显示这些数据：
id | name | boss | designation
---+------+------+------------
1 | AB | SUP | Principle
2 | CD | AB | HOD
3 | EF | AB | HOD
4 | GH | AB | HOD
5 | IJ | CD | Teacher
6 | KL | EF | Teacher
7 | MN | EF | Teacher
8 | OP | MN | Student
9 | QR | EF | Teacher
10 | ST | AB | HOD
现在我正在使用javascript显示上述表格。现在我计划使用Angular.js学习和实现相同的示例。是否有任何内置的angularjs来做这样的事情？如果没有，那么请告诉我如何使用javascript做到这一点？
答案 0 :(得分：2)
您可以使用data.map(...)以您需要在表格中显示的格式进行投影。
例如，您可以执行以下操作：
$scope.tableContent = data.map(function(d) { return new {
id: d.id,
name: d.name,
boss: data.filter(function(x) {return x.id == d.boss; })[0],
designation: designations.filter(function(des) { des.id == d.designation; })[0];
});
或类似的东西。然后，您只需将tableContent绑定到ng-repeat并使用angular更好地呈现HTML。
这样的事情：
<table>
<tr ng-repeat='row on tableContent'>
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.boss.name}}</td>
<td>{{row.designation.name}}</td>
</tr>
</table>
答案 1 :(得分：1)
您可以使用$.grep功能：
$scope.getDesignation = function (Id) {
return jQuery.grep(designations, function (a) {
return a.Id == Id;
})[0].name;
}
从html调用getDesignation函数。
示例：
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<td>{{ item.boss }}</td>
<td>{{ getDesignation(item.designation) }} </td>
</tr>
</tbody>
</table>
答案 2 :(得分：0)
var data = [{id: 1, name: "AB", designation: 1},
{id: 2, name: "CD", boss: 1, designation: 2},
{id: 3, name: "EF", boss: 1, designation: 2},
{id: 4, name: "GH", boss: 1, designation: 2},
{id: 5, name: "IJ", boss: 2, designation: 3},
{id: 6, name: "KL", boss: 3, designation: 3},
{id: 7, name: "MN", boss: 3, designation: 3},
{id: 8, name: "OP", boss: 7, designation: 4},
{id: 9, name: "QR", boss: 3, designation: 3},
{id: 10, name: "ST", boss: 1, designation: 2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
for (var i = 0; i < data.length; i++) {
var boss = data[i].boss;
var b = eval(i+1);
var bossId = data[i].boss-1;
if(boss){
var bossName = data[bossId].name;
}
var name = data[i].name;
var designationId = data[i].designation;
var designationName = designations[designationId-1].name;
if(!boss){
$("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>SUP</td><td>"+designationName+"</td></tr>");
} else {
$("#test tbody").append("<tr><td>"+(b)+"</td><td>"+name+"</td><td>"+bossName+"</td><td>"+designationName+"</td></tr>");
}
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="test">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
答案 3 :(得分：0)
查看
<html ng-app="app">
<div ng-controller="myCtrl as vm">
<div ng-repeat="item in data">
{{item.name}}
<br/> Designation : {{getDesignationById(item.designation).name}}
<br/>
<br/>
</div>
</div>
</html>
<强> CONTROLLER
var app = angular.module('app', [])
// controller
app.controller('myCtrl', ['$scope', '$filter', function($scope, $filter) {
$scope.data = [{
'id': 1,
'name': "AB",
'designation': 1
}, {
'id': 2,
'name': "AC",
'designation': 2
}, {
'id': 3,
'name': "ER",
'designation': 3
}, {
'id': 4,
'name': "TG",
'designation': 4
}]
var designations = [{
'id': 1,
'name': "Principle"
}, {
'id': 2,
'name': "HOD"
}, {
'id': 3,
'name': "Teacher"
}, {
'id': 4,
'name': "Student"
}];
$scope.getDesignationById = function(id) {
return $filter('filter')(designations, { id: id })[0];
}
}]);
答案 4 :(得分：0)
您可以这样做：
var dataMap = data.reduce((p, c) => {p[c.id] = c.name; return p;}, {});
var designationsMap = designations.reduce((p, c) => {p[c.id] = c.name; return p;}, {});
data.forEach((v) => {
if(v.boss && dataMap[v.boss]){
v.boss = dataMap[v.boss];
}
if(v.designation && designationsMap[v.designation]){
v.designation = designationsMap[v.designation];
}
});
var app = angular.module("app", []);
app.controller("mainController", mainController);
function mainController($scope){
$scope.data = data;
}
HTML：
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>boss</th>
<th>designation</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data track by $index">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.boss}}</td>
<td>{{item.designation}}</td>
</tr>
</tbody>
</table>
答案 5 :(得分：0)
普通JS（不需要jQuery）
首先更改数据数组以包含传输的值。
然后填充表格行
var data = [{id: 1, name:"AB", boss= 0, designation:1},
{id: 2, name:"CD", boss: 1, designation:2},
{id: 3, name:"EF", boss: 1, designation:2},
{id: 4, name:"GH", boss: 1, designation:2},
{id: 5, name:"IJ", boss: 2, designation:3},
{id: 6, name:"KL", boss: 3, designation:3},
{id: 7, name:"MN", boss: 3, designation:3},
{id: 8, name:"OP", boss: 7, designation:4},
{id: 9, name:"QR", boss: 3, designation:3},
{id: 10, name:"ST", boss: 1, designation:2}];
var designations = [{id: 1, name: "Principle"},
{id: 2, name: "HOD"},
{id: 3, name: "Teacher"},
{id: 4, name: "Student"}];
for(var key in data){
for(var id in designations){
if(designations[id].id == data[key].designation){
data[key].designation = designations[id].name;
break;
}
}
for(var id in data){
if(data[id].id == data[key].boss){
data[key].boss = data[id].name;
break;
}
}
}
var table = new Array();
var row = new Array();
for(var key in data[0]){
row.push(key);
}
table.push(row);
for(var index in data){
row = new Array();
for(var column in data[index]){
row.push(data[index][column]);
}
table.push(row);
}