Question

我想显示http://khan4019.github.io/tree-grid-directive/test/treeGrid.html之类的网格树表

我已经使用

安装了指令

$ npm install angular-bootstrap-grid-tree

grifCtrl.js

angular.module('app').controller('grifCtrl', ['$scope','treeGrid',function($scope,treeGrid){

 $scope.tree_data = [
     {Name:"USA",Area:9826675,Population:318212000,TimeZone:"UTC -5 to -10",
      children:[
        {Name:"California", Area:423970,Population:38340000,TimeZone:"Pacific Time",
            children:[
                {Name:"San Francisco", Area:231,Population:837442,TimeZone:"PST"},
                {Name:"Los Angeles", Area:503,Population:3904657,TimeZone:"PST"}
            ]
        },
        {Name:"Illinois", Area:57914,Population:12882135,TimeZone:"Central Time Zone",
            children:[
                {Name:"Chicago", Area:234,Population:2695598,TimeZone:"CST"}
            ]
        }
    ]
  },    
  {Name:"Texas",Area:268581,Population:26448193,TimeZone:"Mountain"}
  ];
}

]);

grid.html

<div ng-controller="grifCtrl">
 <tree-grid tree-data="tree_data"></tree-grid>
</div>

但是它不起作用并且在下面给出

angular.js:13920 Error: [$injector:unpr] Unknown provider: treeGridProvider <- treeGrid <- grifCtrl

此指令还会自动显示表结构吗？？？任何人都建议

Answer 1

也将treeGrid插入函数中。

.controller('grifCtrl', ['$scope','treeGrid',function($scope, treeGrid) { ..}

应该工作。

已更新：

在此之前，请确保还注入了module数组：

angular.module('app', [..., 'treeGrid'])

Answer 2

使用了此示例并完成了报告，请检查此链接https://codepen.io/sliiice/pen/GurpF

HTML：

    <h1>
  Tree Table and Checkbox with AngularJS
</h1>
<div class="wrapper" ng-app="testApp" ng-controller="treeTable">
  <table class="table-nested">
    <thead>
      <tr>
        <th class="cell-input">
          <input ng-checked="(list | selected).length == list.length" ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th>
        <th>
          Name
        </th>
        <th class="cell-members">
          Members
        </th>
        <th>
          Title
        </th>
      </tr>
    </thead>
    <tbody ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-repeat="item in list"></tbody>
  </table>
  <script id="table_tree.html" type="text/ng-template">
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
      <td class="cell-input">
        <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
      </td>
      <td class="cell-name" ng-click="item.opened = !item.opened">
        <div class="indent" style="padding-left: {{15*level}}px"></div>
        {{item.name}}
      </td>
      <td class="cell-members">
        {{item.children.length}}
      </td>
      <td>
        {{item.title}}
      </td>
    </tr>
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0">
      <td colspan="4">
        <table>
          <tbody ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
        </table>
      </td>
    </tr>
  </script>
</div>

JS：

(function() {
  var app, list;

  list = [
    {
      name: 'Developer',
      opened: true,
      children: [
        {
          name: 'Front-End',
          children: [
            {
              name: 'Jack',
              title: 'Leader'
            },
            {
              name: 'John',
              title: 'Senior F2E'
            },
            {
              name: 'Jason',
              title: 'Junior F2E'
            }
          ]
        },
        {
          name: 'Back-End',
          children: [
            {
              name: 'Mary',
              title: 'Leader'
            },
            {
              name: 'Gary',
              title: 'Intern'
            }
          ]
        }
      ]
    },
    {
      name: 'Design',
      children: [
        {
          name: 'Freeman',
          title: 'Designer'
        }
      ]
    },
    {
      name: 'S&S',
      children: [
        {
          name: 'Nikky',
          title: 'Robot'
        }
      ]
    }
  ];

  app = angular.module('testApp', []).controller('treeTable', [
    '$scope',
    '$filter',
    function($scope,
    $filter) {
      $scope.list = list;
      $scope.toggleAllCheckboxes = function($event) {
        var i,
    item,
    len,
    ref,
    results,
    selected;
        selected = $event.target.checked;
        ref = $scope.list;
        results = [];
        for (i = 0, len = ref.length; i < len; i++) {
          item = ref[i];
          item.selected = selected;
          if (item.children != null) {
            results.push($scope.$broadcast('changeChildren',
    item));
          } else {
            results.push(void 0);
          }
        }
        return results;
      };
      $scope.initCheckbox = function(item,
    parentItem) {
        return item.selected = parentItem && parentItem.selected || item.selected || false;
      };
      $scope.toggleCheckbox = function(item,
    parentScope) {
        if (item.children != null) {
          $scope.$broadcast('changeChildren',
    item);
        }
        if (parentScope.item != null) {
          return $scope.$emit('changeParent',
    parentScope);
        }
      };
      $scope.$on('changeChildren',
    function(event,
    parentItem) {
        var child,
    i,
    len,
    ref,
    results;
        ref = parentItem.children;
        results = [];
        for (i = 0, len = ref.length; i < len; i++) {
          child = ref[i];
          child.selected = parentItem.selected;
          if (child.children != null) {
            results.push($scope.$broadcast('changeChildren',
    child));
          } else {
            results.push(void 0);
          }
        }
        return results;
      });
      return $scope.$on('changeParent',
    function(event,
    parentScope) {
        var children;
        children = parentScope.item.children;
        parentScope.item.selected = $filter('selected')(children).length === children.length;
        parentScope = parentScope.$parent.$parent;
        if (parentScope.item != null) {
          return $scope.$broadcast('changeParent',
    parentScope);
        }
      });
    }
  ]);

  app.filter('selected', [
    '$filter',
    function($filter) {
      return function(files) {
        return $filter('filter')(files,
    {
          selected: true
        });
      };
    }
  ]);

}).call(this);

CSS：

@charset "UTF-8";
body {
  font: 13px helvetica;
  width: 80%;
  margin: 40px auto;
  background: #eee;
  text-align: center;
}

table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
}

.table-nested {
  background: #fff;
  border: 2px solid #444;
  text-align: left;
}
.table-nested th, .table-nested td {
  padding: 0;
}
.table-nested th + th, .table-nested th + td, .table-nested td + th, .table-nested td + td {
  padding-left: 5px;
}
.table-nested td {
  border-top: 1px solid;
}
.table-nested td[colspan] {
  border: none;
}
.table-nested .cell-input {
  width: 20px;
  border-right: 1px solid;
}
.table-nested .cell-members {
  width: 100px;
}
.table-nested .indent {
  display: inline-block;
}
.table-nested .parent > .cell-name {
  cursor: pointer;
}
.table-nested .parent > .cell-name > .indent {
  margin-right: 5px;
}
.table-nested .parent > .cell-name > .indent:before {
  content: "";
  font-family: FontAwesome;
  display: inline-block;
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
.table-nested .children {
  display: none;
}
.table-nested .opened > tr > .cell-name > .indent:before {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.table-nested .opened > .children {
  display: table-row;
}

错误：[$ injector：unpr]未知提供程序：treeGridProvider（角度网格树表不起作用）

2 个答案: