javascript - angularJS と adapt-strap を使用したツリー テーブル。列が「圧迫」されている

Question

これは、adapt-strap を使用した単純なツリー テーブルの例です。新しい列の追加中に問題が発生しました。大文字の名前で列を追加しようとしました:

jsfiddle:

http://jsfiddle.net/t2qafj81/

HTML:

<div ng-app="adaptv.adaptStrapDocs" ng-controller="treebrowserCtrl">
    <!-- ===== template files ===== -->
    <script type="text/ng-template" id="src/treebrowser/docs/treeHeader.html">
        <div>
            <span class="pull-left">Name</span>
            <span class="pull-left">Name uppercase</span>
            <span class="pull-right margin-right-lg">Price Range</span>
        </div>
    </script>
    <script type="text/ng-template" id="src/treebrowser/docs/treeNode.html">
        <div>
            <span class="pull-left">{{ item.name }}</span>
            <span class="pull-left">{{ item.name | uppercase }}</span>
            <span class="pull-right margin-right-lg">  <a href ng-click="open(item)">  
                {{ item.priceRange }}
                </a> </span>
        </div>
    </script>

    <!-- ===== Usage with border & header ===== -->
    <p>With Border &amp; header</p>
    <ad-tree-browser class="ad-border-default"
                     tree-name="treeDemoBordered"
                     row-ng-class="{added:item._selected}"
                     tree-root="root"
                     child-node="children"
                     children-padding="10"
                     bordered="true"
                     node-header-url="src/treebrowser/docs/treeHeader.html"
                     node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
    <hr>
    <!-- ===== Usage ===== -->
    <p>Simple tree without border</p>
    <ad-tree-browser class="ad-border-default"
         tree-name="treeDemo"
         row-ng-class="{added:item._selected}"
         tree-root="root"
         child-node="children"
         children-padding="15"
         node-template-url="src/treebrowser/docs/treeNode.html">
    </ad-tree-browser>
</div>

Java スクリプト:

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
  'ngSanitize',
  'adaptv.adaptStrap'
])

// ========== controllers ========== //
.controller('treebrowserCtrl', ['$scope', function ($scope) {
    $scope.root = {
      children: [
           {
          name: 'Bmw',
          priceRange: '30k to 200k'
           },
        {
          name: 'Bmw',
          priceRange: '30k to 200k',
          children: [
            {
              name: '328i',
              priceRange: '30k to 40k'
            },
            {
              name: '335i',
              priceRange: '35k to 47k'
            },
            {
              name: '535i',
              priceRange: '40k to 50k'
            }
          ]
        },
        {
          name: 'Audi',
          priceRange: '30k to 200k',
          children: [
            {
              name: 'A4',
              priceRange: '30k to 55k',
              children: [
                {
                  name: 'Quattro premium plus',
                  priceRange: '35k to 49k'
                },
                {
                  name: 'Quattro Prestige',
                  priceRange: '45k to 55k'
                },
                {
                  name: 'FWD',
                  priceRange: '35k to 40k'
                }
              ]
            },
            {
              name: 'A6',
              priceRange: '45k to 60k'
            },
            {
              name: 'A8',
              priceRange: '60k to 80k'
            }
          ]
        },
        {
          name: 'Honda',
          priceRange: '15k to 50k',
          children: [
            {
              name: 'Civic',
              priceRange: '15k to 20k'
            },
            {
              name: 'Accord',
              priceRange: '25k to 35k'
            },
            {
              name: 'CRV',
              priceRange: '25k to 35k'
            }
          ]
        }
      ]
    };

    $scope.open = function(data){
        alert(data.name);
    }
  }
]);

テーブルのヘッダーと行のテンプレートを正しく定義するにはどうすればよいですか? (複数の新しい列を追加したい)

adapt-strap とツリー ブラウザーの詳細: http://adaptv.github.io/adapt-strap/##treebrowser