javascript - 追加 - jquery テーブル操作




Angular 指令テーブルの行の問題 (2)

まず、タグ名にダッシュ文字を含めることはできません。 したがって、 tr-rowをタグ名として使用することはできませんが、属性として使用できます。

次に、そのようなディレクティブを書くことができます:

.directive('trRow', function () {

    return {
        template: '<tr><td ng-bind="row.id"></td><td><strong ng-bind="row.name"></strong></td><td ng-bind="row.description"></td></tr>'
    };
});

使い方はそうです:

<tbody>
    <tr tr-row ng-repeat="row in data"></tr>
</tbody>

フィドルの実例: http://jsfiddle.net/T7k83/85/ : http://jsfiddle.net/T7k83/85/

私は初心者ですが、角度のあるプログラマですが、私は実際に指示を理解することにとても近いです。

私はここフィドルを作成しますが、私は以前にフィドルを使ったことが一度もなく、それは全くレンダリングされていません...

tr-rowはディレクティブです。 私は、データをループし、レコードごとにディレクティブ(行)を印刷しようとしています。 HTML:

<table ng-controller="fiddleCtrl">
   <thead>
      <th>id</th>
      <th>name</th>
      <th>description</th>
  </thead>
  <tbody>
    <tr><tr-row ng-repeat="d in data" scdata="d"></tr-row></tr>
  </tbody>
</table>

javascript:

var myapp = angular.module('myApp', [])
.controller('fiddleCtrl', ['$scope', function ($scope) {

$scope.data = [
     { id: 1, name: 'Fred',   description: 'not the best worker' }, 
     { id: 2, name: 'Wilma',  description: 'Freds Wife'}, 
     { id: 3, name: 'Barney', description: 'Freds best friend'}, 
     { id: 4, name: 'Louise', description: 'Never heard of Fred'}, 
     { id: 5, name: 'Tracy',  description: 'Some Chick'}, 
     { id: 6, name: 'Foo',    description: 'Inventer of bar'}
];
}]).directive('trRow', function ($compile) {
return {
    restrict: "E",
    replace: true,
    link: function (scope, element, attrs) {
        scope.id = scope.d.id;
        scope.name = scope.d.name;
        scope.desc = scope.d.description;

        var tmpl = '<tr  ><td>{{id}}</td><td><strong>{{name}}</strong></td><td>{{desc}}</td></tr>';
        element.html(tmpl).show();
        //var e =$compile(tmpl)(scope);
        //element.replaceWith(e);
        var e = $compile(element.contents())(scope);
    },
    scope: {
        d: "="
    }
};
});

簡単にする必要があります。 (ル・シー)

どんな助けもありがたいです、私は本当にこれを理解する必要があります。

私のコードで起こっているのは、tr行のディレクティブがテーブルを置き換えていることです。 私はそれらのリストを取得します(tr行要素のINSIDEを使用していますが、それらを表示するテーブルはありません)。私はこれが近いとわかりますが、新しい組み合わせを試すことはできません。

私はそれに行がある単純なテーブルが必要です。

何百万回もこれが尋ねられたら、私は何を探せばよいか分からないように思えます。 私はとても多くのことを試みました。


実際、この問題は<table>要素に固有です。

ブラウザの解析エンジンでは、 <table>内の無効なタグが好きではないので、ディレクティブが有効な要素で置き換えられる前に、ディレクティブをテーブルからスローしようとします(要素を調べることによって見ることができます)。 これは、ディレクティブに名前にダッシュが含まれていない場合でも適用されます。

これを解決する方法は、@MuratCorluによって提案されるEA代わりに、ディレクティブ型Aを使用することです。

<div>ような他の要素については、ダッシュを含む名前のカスタムタグで置き換えることができます。 たとえば、 ng-repeatをタグとして使用できます。







angularjs-ng-repeat