空の要素を実装して、角でtdを繰り返す

3番目から列を繰り返す必要があります。 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>ないusingディレクティブを持つ：私はthis fiddler

アップデートで同様のものを試してみました。使用された*データを分離するためにフィドルでサインする

出典

2017-05-05 13:54:12 anoop

申し訳ありませんが、「td」のみでなければなりませんでした。私は内側のスパンを置き換えるためのreplace-me命令を作成し、そのHTMLで置き換えるよりもng-repeatをtdに追加しました。私の答えを参照してください – Bellash

@Bellash：私はあなたの正確な要件はわかりませんが、このような複雑な指令を作成する必要はないと思います。特に大きなテーブルのデータでページのレンダリングが遅くなる可能性があります。ここで私はあなたの[フィドルリンク]（http://jsfiddle.net/e28mhhxd/）をフォークし、*を別のデータに置きます。それは簡単な '

' – anoop

私はついにこの問題を解決しました。私はそのHTMLSで置き換えるよりも、私はtdにng-repeatを追加

私はインナーspan Sを交換するreplace-meディレクティブを作成し、

は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を繰り返す

答えて

関連する問題