javascript - 如何使用 ng-repeat 使用对象数组内的属性来重复行

Question

我有两个数组 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']);

Answer 1

• 根据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