web-dev-qa-db-ja.com

Angular ng-table動的ヘッダーは内部では機能しません

http://bazalt-cms.com/ng-table/example/2 にある作成者の例を使用して、動的列でng-tableを使用しています。

トランスクルージョンでディレクティブをラップしようとするまでは問題なく動作しましたが、 http://plnkr.co/edit/mjYVEf に示すように、witchによってヘッダーが消えました。

index.html

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
    <script data-require="[email protected]" data-semver="0.1.0" src="http://bazalt-cms.com/assets/ng-table-export/0.1.0/ng-table-export.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.0" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.0/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body ng-app="main" ng-controller="DemoCtrl">
    <div ng-controller="DemoCtrl">
    <transclude-example>
      Columns:
      <label class="checkbox" ng-repeat="column in columns">
          <input type="checkbox" ng-model="column.visible" /> {{column.title}}
      </label>

      <table ng-table="tableParams" show-filter="true" class="table">
          <thead>
          <tr>
              <th ng-repeat="column in columns" ng-show="column.visible"
                  class="text-center sortable" ng-class="{
                      'sort-asc': tableParams.isSortBy(column.field, 'asc'),
                      'sort-desc': tableParams.isSortBy(column.field, 'desc')
                    }"
                  ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
                  {{column.title}}
              </th>
              <!--<th>Columns:{{columns.length}}</th>-->
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="user in $data">
              <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
                  {{user[column.field]}}
              </td>
          </tr>
          </tbody>
      </table>
    </transclude-example>
  </body>
</html>

script.js

var app = angular.module('main', ['ngTable']).
        controller('DemoCtrl', function($scope, $filter, ngTableParams) {
            var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];
            $scope.columns = [
                { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
                { title: 'Age', field: 'age', visible: true }
            ];
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                filter: {
                    name: 'M'       // initial filter
                }
            }, {
                total: data.length, // length of data
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });

            var originalData = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];
            $scope.originalColumns = [
                { title: 'Name', field: 'name', visible: true, filter: { 'name': 'text' } },
                { title: 'Age', field: 'age', visible: true }
            ];
            $scope.originalTableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10,          // count per page
                filter: {
                    name: 'M'       // initial filter
                }
            }, {
                total: originalData.length, // length of data
                getData: function($defer, params) {
                    // use build-in angular filter
                    var orderedData = params.sorting() ?
                            $filter('orderBy')(originalData, params.orderBy()) :
                            originalData;

                    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        });

        app.directive('transcludeExample', function() {
          return {
              restrict: 'EA',
              template: '<div ><div><strong>Transcluded Example</strong></div><div ng-transclude></div></div>',
              replace: true,
              transclude: true
          };
});

誰かが同じ問題に遭遇しましたか？

angularjsngtable
5
Celestino Ramalho

ヘッダーのテンプレートを定義し、ng-tableのtemplate-header属性を設定します。

あなたはコードを見ることができます http://plnkr.co/edit/EXVkjabwfjCreNZAY1c2?p=preview

テンプレートヘッダーを定義する

<script id="sample_ng_header" type="text/ng-template">
  <tr>
      <th ng-repeat="column in columns" ng-show="column.visible"
          class="text-center sortable" ng-class="{
              'sort-asc': tableParams.isSortBy(column.field, 'asc'),
              'sort-desc': tableParams.isSortBy(column.field, 'desc')
            }"
          ng-click="tableParams.sorting(column.field, tableParams.isSortBy(column.field, 'asc') ? 'desc' : 'asc')">
          {{column.title}}
      </th>
      <!--<th>Columns:{{columns.length}}</th>-->
  </tr>
</script>

テンプレートを使用してng-tableのtemplate-header属性を設定します

<table ng-table="tableParams" template-header="sample_ng_header" show-filter="true" class="table">
  <tbody>
  <tr ng-repeat="user in $data">
      <td ng-repeat="column in columns" ng-show="column.visible" sortable="column.field">
          {{user[column.field]}}
      </td>
  </tr>
  </tbody>
</table>
19
Seunghun Choe

2015年2月以降、これを行うための新しい方法があります。元々は githubのこの問題 からリンクされているものを見つけましたが、書かれたデモは元のデモから更新されています。

新しいngTableDynamicディレクティブを利用します。

デモは http://ng-table.com/#/formatting/demo-dynamic-js-values にあります。

Ng-tableの残りの部分に十分精通していると仮定して、注意を払うべきメインコードは次のとおりです。

<table ng-table-dynamic="tableParams with cols" show-filter="true" class="table table-bordered table-striped">
    <tr ng-repeat="user in $data">
        <td ng-repeat="col in $columns">{{user[col.field]}}</td>
    </tr>
</table>

tableParams with cols部分が解析され、withの周りで分割されて、テーブル構成と列定義が取得されます（例：$scope.tableParamsおよび$scope.cols）。次のようなコードで列の定義を確認できます。

var usernameCol = {
    title: 'Full Name',
    titleAlt: 'Name',
    sortable: 'name',
    filter: { name: 'select' },
    filterData: names,
    show: true,
    field: 'name'
};
var ageCol = { ... }

$scope.cols = [usernameCol, ageCol];
13
Tyler Collier

これが私の解決策です：template-headerを使用した上記の解決策は私には機能しませんでした。秘訣は、ヘッダーに列を追加し、データセルで同じことを行うことです

<table ng-table="tableParams" class="table">
        <tr>
            <th ng-repeat="col in tableCols"
                class="text-left sortable header observation-header" ng-class="{
                        'sort-asc': tableParams.isSortBy(col.field, 'asc'),
                        'sort-desc': tableParams.isSortBy(col.field, 'desc')
                      }"
                ng-click="tableParams.sorting(col.field, tableParams.isSortBy(col.field, 'desc') ? 'asc' : 'desc')">
                <div>{{col.title}}</div>
            </th>
        </tr>
        <tbody>
            <tr ng-repeat="dataObj in $data">
                <td ng-repeat="col in tableCols" data-title="col.title" sortable="col.field">{{dataObj[col.field]}}</td>
            </tr>
        ></tbody>
    </table>
0
Afaque