我有两个数组 expArr 和 usrArr。我想根据第一个数组重复整个表,第二个表应该按行重复。
$scope.expArr = [
{"competency":"Proficient", "Name":"course1"},
{"competency":"Proficient", "Name":"course2"},
{"competency":"Expert", "Name":"course3"},
{"competency":"Intermediate", "Name":"course4"},
{"competency":"Proficient", "Name":"course5"}
] ;
$scope.userArr = [
{"Name": "name1", "Prof":"Expert,Profocient,Basic,Basic,Basic"},
{"Name":"name2","Prof":"Expert,Profocient,Basic1,Basic1,Basic1"}
] ;
我希望表包含 corusename 和 proficiency,并且应根据第二个数组重复接下来的列。因此,每一行将包含类(class)名称、熟练程度和每个用户的熟练程度(每个用户单独的列)。如何实现这一目标。
这是 fiddle :http://jsfiddle.net/keshav_1007/ygzo8yfg/5/
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<table class="myTable">
<tr>
<th>Course</th>
<th>Expected Prof</th>
</tr>
<tr ng-repeat="comp in expArr track by $index">
<td>{{comp.Name}}</td>
<td>{{comp.competency}}</td>
</tr>
</table>
<table class="otherTable">
<tr>
<th ng-repeat="elem in custArr">{{elem.Name}}</th>
</tr>
</table>
</div>
JS:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.expArr = [
{"competency":"Proficient", "Name":"course1"},
{"competency":"Proficient", "Name":"course2"},
{"competency":"Expert", "Name":"course3"},
{"competency":"Intermediate", "Name":"course4"},
{"competency":"Proficient", "Name":"course5"}
] ;
$scope.userArr = [
{"Name": "name1", "Prof":"Expert,Profocient,Basic,Basic,Basic"},
{"Name":"name2","Prof":"Expert,Profocient,Basic1,Basic1,Basic1"}
] ;
$scope.custArr = [];
angular.forEach($scope.userArr,function(item){
var profs = item.Prof.split(',');
$scope.custArr.push({"Name":item.Name,"userProf":profs});
});
console.log($scope.custArr);
});
angular.bootstrap(document, ['myApp']);
最佳答案
- 根据
userProfs
的长度迭代tr
- 使用
tr
的index
迭代数组中的项目
使用$parent.$index
获取parent
的迭代索引
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.expArr = [{
"competency": "Proficient",
"Name": "course1"
}, {
"competency": "Proficient",
"Name": "course2"
}, {
"competency": "Expert",
"Name": "course3"
}, {
"competency": "Intermediate",
"Name": "course4"
}, {
"competency": "Proficient",
"Name": "course5"
}];
$scope.userArr = [{
"Name": "name1",
"Prof": "Expert,Profocient,Basic,Basic,Basic"
}, {
"Name": "name2",
"Prof": "Expert,Profocient,Basic1,Basic1,Basic1"
}];
$scope.custArr = [];
angular.forEach($scope.userArr, function(item) {
var profs = item.Prof.split(',');
$scope.custArr.push({
"Name": item.Name,
"userProf": profs
});
});
});
.otherTable tr td,
.myTable tr td {
border: 1px solid black;
}
.otherTable th,
.myTable th {
border: 1px solid black;
}
.otherTable,
.myTable {
display: inline-block;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
<h1>TTA</h1>
<div ng-app="myApp" ng-controller="myCtrl">
<table class="myTable">
<tr>
<th>Course</th>
<th>Expected Prof</th>
</tr>
<tr ng-repeat="comp in expArr track by $index">
<td>{{comp.Name}}</td>
<td>{{comp.competency}}</td>
</tr>
</table>
<table class="otherTable">
<tr>
<th ng-repeat="elem in custArr">{{elem.Name}}</th>
</tr>
<tr ng-repeat="u in custArr[0].userProf track by $index">
<td ng-repeat="key in custArr">{{key.userProf[$parent.$index]}}</td>
</tr>
</table>
</div>
Fiddle Demo
关于javascript - 如何使用 ng-repeat 使用对象数组内的属性来重复行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38141940/