AngularJs数据表plunker无法正常工作

时间:2017-01-05 12:13:47

标签: angularjs datatable plunker

我是plunker / jsfiddle的新手并尝试创建https://jsfiddle.net/4n3tmbm3/5/的plunker但是根据给定的教程它不起作用。

这是我的傻瓜:Angular Datatable Selecting rows

我无法找到问题。任何形式的帮助将不胜感激。

1 个答案:

答案 0 :(得分:2)

这是一个解决您的大部分问题的更新,其中包括:

  • 双重使用ng-app
  • 缺少某些必需库的脚本
  • 缺少模块依赖性声明
  • 缺少声明控制器依赖性

请参阅https://plnkr.co/edit/AXaixxzdapWnQkjBp1bg?p=preview,其中一些更改包括:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.5.6/angular-datatables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-resource/1.6.1/angular-resource.min.js"></script>
angular
  .module('showcase', ['datatables', 'ngResource'])
  .controller('RowSelectCtrl', ['$compile', '$scope', '$resource', 'DTOptionsBuilder', 'DTColumnBuilder', function ($compile, $scope, $resource, DTOptionsBuilder, DTColumnBuilder) { ...
<div ng-app="showcase">
  <div ng-controller="RowSelectCtrl as showCase">
    <p class="text-danger">You selected the following rows:</p>
    <p>
    </p><pre>{{ showCase.selected | json }}</pre>
    <p></p>
    <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
  </div>
</div>