각도로 td를 반복하기 위해 빈 요소를 구현하십시오.

세 번째부터 시작하는 열을 반복해야합니다. 하나는 tr 안에 다른 탭을 넣을 수 없기 때문에이 예제에서 사용할 수있는 것은 hybrid 요소입니까?각도로 td를 반복하기 위해 빈 요소를 구현하십시오.

<table> 
     <tr> 
      <th colspan='2'>Category</th> 
      <th ng-repeat='p in ps' colspan='3'>{{p.id}}</th></tr> 
     <tr ng-repeat='c in cats'> 
      <td>{{c.code}}</td> 
      <td>{{c.label}}</td> 
     <hybrid ng-repeat='p in ps'> 
      <td>{{p.quantity}}</td> 
      <td>{{p.cost}}</td> 
      <td>{{p.quantity*p.cost}}</td> 
     </hybrid>     
     </tr> 
    </table>

내가 실패 내가 무엇을 놓치고

app.directive("hybrid",function($compile) { 
    return { 
     restrict: 'E', 
     link: function(scope, element, attrs) {    
      element[0].outerHTML = element[0].outerHTML; 
      $compile(element.contents())(scope); 
      } 
     } 
    });

를 다음과 같이 뭔가를 시도

출처

2017-05-05 Bellash

정확히 귀하의 요구 사항을 모르겠지만 <td> 안에 <span>을 반복하여 사용할 수 있습니다.

Fiddle link 만 <td> 아니라 사용 지침을 : 나는 this fiddler

업데이트에서 비슷한 시도했다. 사용 * 데이터를 구분하기 위해 바이올린에 로그인

출처

2017-05-05 13:54:12 anoop

미안하지만 'td 만'이어야합니다. replace-me 지시문을 만들어 내부 스팬을 대체하고 ng-repeat를 html로 대체하는 것보다 td에 추가했습니다. 내 대답을 참조하십시오 – Bellash

@Bellash : 다시 말하지만 정확한 요구 사항을 알지는 못하지만 복잡한 지시문을 작성할 필요가 없다고 생각합니다. 특히 큰 테이블 데이터에서 페이지 렌더링이 느려질 수 있습니다. 여기서 나는 당신의 [바이올린 링크] (http://jsfiddle.net/e28mhhxd/)를 포크하고 * 데이터를 분리한다. 간단한 '

' – anoop

나는 결국이 문제를 해결했습니다.

나는 내부 span의를 대체 할 replace-me 지침을 작성

참조의 htmls로 교체보다 td에 ng-repeat을 추가 this fiddle

<table> 
    <tr> 
     <th colspan='2'>Category</th> 
     <th ng-repeat='p in ps' colspan='3'>{{p.id}}</th> 
    </tr> 
    <tr ng-repeat='c in cats'> 
     <td>{{c.code}}</td> 
     <td>{{c.label}}</td> 
     <td colspan='3' ng-repeat='p in ps' data-hybrid> 
    <span data-replace-me data-replace-with-tag='td'>{{p.quantity}}</span> 
    <span data-replace-me data-replace-with-tag='td'>{{p.cost}}</span> 
    <span data-replace-me data-replace-with-tag='td'>{{p.quantity*p.cost}}</span> 
     </td> 
    </tr> 
</table>

또는

var myApp = angular.module('myApp', []); 

    myApp.directive("hybrid", function($compile) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var el = angular.element(htmls); 
      $compile(el.contents())(scope); 
      element.replaceWith(el); 
     } 
     } 
    }); 
    myApp.directive("replaceMe", function($compile) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var htmls = element.html(), 
      el; 
      if (attrs.replaceWithTag) { 
      htmls = "<" + (attrs.replaceWithTag) + ">" + element.html() +   "</" + (attrs.replaceWithTag) + ">"; 
      } 
      el = angular.element(htmls); 
      $compile(el.contents())(scope); 
      element.replaceWith(el); 
     } 
     } 
    }); 

    myApp.controller('MyCtrl', function MyCtrl($scope) { 
     $scope.ps = [{ 
     id: 2, 
     quantity: 3, 
     cost: 10 
     }, { 
     id: 5, 
     quantity: 7, 
     cost: 20 
     }]; 
     $scope.cats = [{ 
     code: "mycode", 
     label: "mylabel" 
     }] 
    });

출처

2017-05-05 14:41:05 Bellash

각도로 td를 반복하기 위해 빈 요소를 구현하십시오.

답변

관련 문제