如何在 ng-repeat 中拆分数组列表

debugcn 发表于 Dev

Qing Xu

我是 Angular 的新手，目前有一个分裂的问题。

我想通过使用 split("--" 和 ";")将 Class Subjects 分成名为subject ID和Name的两列。但是，我不知道如何在ng-repeattable 中执行此操作。

这就是表格现在的样子：

我想要的是更像这样的 3 列表：

username  subject ID  Subject Name

HTML代码

<table class="table table-hover">
<thead>
    <tr>
        <th>#</th>
        <th>Username</th>
        <th>Class Subjects</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="studentsMember in currentPageElements">
        <td>{{$index + 1}}</td>
        <td>{{studentsMember.username}}</td>
        <td>{{studentsMember.class_subject}}</td>
    </tr>
</tbody>

控制器

function listStudentClassCtrl($scope,UserManager,SchoolService,SingleRequestHandler,TableService) {
    $scope.items = {};

    var listStudentClassDefer;
    if(angular.isUndefined(listStudentClassDefer))
    {
      $scope.loading = true;
      listStudentClassDefer = SingleRequestHandler.promiseRequest('ListClassesBySchoolId', {inst_id: SchoolService.getCurrentSchool().institution_id, user_type: 10});
      listStudentClassDefer.promise.then(
        function(data){
            console.info("ListUsers - data ",data);
          $scope.staff = data.response;
          TableService.elements = $scope.staff;
        }, 
        function(httpError){
          console.log(httpError);
          $scope.alert.stat = true;
        })
        .finally(function(){
          $scope.loading = false;
        });
    }
}

资料回应格式

 "response":[  
   {  

      "username":"bingowere ",
      "class_subject":"8GEO 3 -- SocialSciences; 8SCI 3 -- Unknown; 8JAP 1 -- Unknown; 8PDH 4 -- Unknown"
   },
   {  
      "username":"letbingo ",
      "class_subject":"8GEO 2 -- SocialSciences; 8RC 6 -- SocialSciences; 8PDH 1 -- Unknown"
   }]

蒂姆·哈克（Tim Harker）

我相信这可能更接近于清旭所追求的。

HTML：

<body ng-controller="listStudentClassCtrl">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>Username</th>
        <th>Subject ID</th>
        <th>Subject Name</th>
      </tr>
    </thead>
    <tbody ng-repeat="studentsMember in currentPageElements">
      <tr ng-repeat="classSubject in studentsMember.class_subject.split(';')">
        <td>{{$index + 1}}</td>
        <td>{{studentsMember.username}}</td>
        <td ng-repeat="SubjectIDName in classSubject.split('--')">{{SubjectIDName}}</td>
      </tr>
    </tbody>
  </table>
</body>

JavaScript / AngularJS控制器：

app.controller('listStudentClassCtrl', function($scope) {
  $scope.currentPageElements = [{
    "username": "bingowere ",
    "class_subject": "8GEO 3 -- SocialSciences; 8SCI 3 -- Unknown; 8JAP 1 -- Unknown; 8PDH 4 -- Unknown"
  }, {
    "username": "letbingo ",
    "class_subject": "8GEO 2 -- SocialSciences; 8RC 6 -- SocialSciences; 8PDH 1 -- Unknown"
  }];
});

这是一个工作 Plunker 的链接，http: //plnkr.co/edit/zcDHa6W8hRUKNMOgKnYZ?p=preview

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。