ng-repeat 및 nested 루프가 있는 행 추가

ng-repeat 및 nested 루프가 있는 행 추가

테이블에 행을 추가할 방법을 찾고 있습니다.데이터 구조는 다음과 같습니다.

  rows = [
    { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
    { name : 'row2' }
  ];

다음과 같은 테이블을 만들고 싶습니다.

  table
     row1
     row1.1
     row1.2
     row2

각도 js ng-반복으로 가능합니까?그렇지 않다면, "각선"으로 하는 방법은 무엇일까요?

편집: 어레이를 평평하게 하는 것은 좋지 않은 해결책입니다.서브 엘리먼트에서 반복할 수 있으면 셀이나 다른 css 클래스 등에서 다른 HTML 태그를 사용할 수 있기 때문입니다.

1년 이상 지났지만 적어도 2레벨(아버지->아들)에 대한 회피책을 찾았습니다.
그냥 반복해tbody의:

<table>
  <tbody ng-repeat="row in rows">
    <tr>
      <th>{{row.name}}</th>
    </tr>
    <tr ng-repeat="sub in row.subrows">
      <td>{{sub.name}}</td>
    </tr>
  </tbody>
</table>

모든 브라우저가 여러 개를 지원하는 것으로 알고 있습니다.tbody테이블 내의 요소

3년 이상 지난 후, 저는 같은 문제에 직면하게 되었고, 지시문을 쓰기 전에 이것을 시험해 보았는데, 잘 작동했습니다.

<table>
    <tbody>
        <tr ng-repeat-start="row in rows">
            <td>
                {{ row.name }}
            </td>
        </tr>
        <tr ng-repeat-end ng-repeat="subrow in row.subrows">
            <td>
                {{ subrow.name }}
            </td>
        </tr>
    </tbody>
</table>

ng-repeat에서는 할 수 없습니다.단, 명령어를 사용하여 실행할 수 있습니다.

<my-table rows='rows'></my-table>

만지작거리다.

myApp.directive('myTable', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var html = '<table>';
            angular.forEach(scope[attrs.rows], function (row, index) {
                html += '<tr><td>' + row.name + '</td></tr>';
                if ('subrows' in row) {
                    angular.forEach(row.subrows, function (subrow, index) {
                        html += '<tr><td>' + subrow.name + '</td></tr>';
                    });
                }
            });
            html += '</table>';
            element.replaceWith(html)
        }
    }
});

이렇게 많은 사람들이 커스텀 디렉티브를 지지하고 $watch에 의해 갱신되는 프록시 변수를 만들고 있다는 사실에 조금 놀랐습니다.

이런 문제가 Angular가JS 필터가 만들어졌습니다!

문서에서:

A filter formats the value of an expression for display to the user.

데이터를 조작하는 것이 아니라 다른 방식으로 포맷하여 표시할 수 있습니다.이제 행 배열을 가져와 평탄하게 만든 후 평탄하게 만든 행을 반환하는 필터를 만듭니다.

.filter('flattenRows', function(){
return function(rows) {
    var flatten = [];
    angular.forEach(rows, function(row){
      subrows = row.subrows;
      flatten.push(row);
      if(subrows){
        angular.forEach(subrows, function(subrow){
          flatten.push( angular.extend(subrow, {subrow: true}) );
        });
      }
    });
    return flatten;
}
})

이제 필터를 ngRepeat에 추가하면 됩니다.

<table class="table table-striped table-hover table-bordered">
  <thead>
    <tr>
      <th>Rows with filter</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in rows | flattenRows">
          <td>{{row.name}}</td>
      </tr>
  </tbody>
</table>

검색과 같이 원하는 경우 테이블을 다른 필터와 결합할 수 있습니다.

다중 tbody 어프로치는 편리하고 유효하지만, 「스트라이프」테이블 등, 자행의 순서나 인덱스에 의존하는 모든 cSS를 혼란스럽게 해, 반복하고 싶지 않은 방법으로 tbody를 스타일링 하지 않았다고 가정합니다.

다음은 http://embed.plnkr.co/otjeQv7z0rifPusneJ0F/preview의 장점입니다.

편집: 서브행 값을 추가하여 테이블에서 어떤 행이 서브행인지 표시하기 위해 사용했습니다.이러한 값을 사용할 수 있는지가 우려됩니다.

네, 가능합니다.

컨트롤러:

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.rows = [
          { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
          { name : 'row2' }
        ];

      }
    ]
  );

HTML:

<table>
  <tr ng-repeat="row in rows">
    <td>
      {{row.name}}
      <table ng-show="row.subrows">
        <tr ng-repeat="subrow in row.subrows">
          <td>{{subrow.name}}</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

플런커

하위 테이블을 원하지 않는 경우, 하위 행에 주석을 다는 동안 구분하기 위해 행을 평탄화합니다.

컨트롤러:

function($scope) {
  $scope.rows = [
    { name : 'row1', subrows : [{ name : 'row1.1' }, { name : 'row1.2' }] },
    { name : 'row2' }
  ];

  $scope.flatten = [];
  var subrows;
  $scope.$watch('rows', function(rows){
    var flatten = [];
    angular.forEach(rows, function(row){
      subrows = row.subrows;
      delete row.subrows;
      flatten.push(row);
      if(subrows){
        angular.forEach(subrows, function(subrow){
          flatten.push( angular.extend(subrow, {subrow: true}) );
        });
      }
    });
    $scope.flatten = flatten;
  });

}

HTML:

<table>
  <tr ng-repeat="row in flatten">
    <td>
      {{row.name}}
    </td>
  </tr>
</table>

플런커

여기 예가 있습니다.이 코드에서는, 모든 유저의 이름이 인쇄됩니다.peopeByCitymanager.manager로 하다

탐:

export class AppComponent {
  peopleByCity = [
    {
      city: 'Miami',
      people: [
        {
          name: 'John', age: 12
        }, {
          name: 'Angel', age: 22
        }
      ]
    }, {
      city: 'Sao Paulo',
      people: [
        {
          name: 'Anderson', age: 35
        }, {
          name: 'Felipe', age: 36
        }
      ]
    }
  ]
}

HTML:

<div *ngFor="let personsByCity of peopleByCity">
  <div *ngFor="let person of personsByCity.people">
    {{ person.name }}
  </div>
</div>

언급URL : https://stackoverflow.com/questions/15362868/adding-rows-with-ng-repeat-and-nested-loop