javascript - 如何在 AngularJS 中启用数据网格？

Question

我试图把这个 https://github.com/angular-data-grid/angular-data-grid.github.io在我的项目上，但它不起作用(可排序、每页项目和分页)。这是我的代码( https://jsfiddle.net/Lz74rhp2/2/ )，但我不知道如何加载外部资源。

我所有的外部资源:

   <script src="assets/js/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
   <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
   <script src="app/controllers.js"></script>
   <script src="assets/js/toastr.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.min.js"></script>
   <script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
   <script type="text/javascript" src="assets/js/boostrap-time/js/bootstrap-material-datetimepicker.js"></script>
   <script src="https://angular-data-grid.github.io/dist/pagination.js"></script>
   <script src="https://angular-data-grid.github.io/dist/dataGrid.js"></script>

当我将 grid-item 放入 tr 中时，我的数据消失了

             <tr grid-item ng-repeat="item in itens | filter:search" class="comprado-{{ item.comprado }}">
                  <td><strong>{{ item.nombre }}</strong></td>
                 <td><strong>{{ item.dirreccion }}</strong></td>
                 <td>{{ item.telefono }}</td>
                 <td>
                    <button class="btn btn-despegar btn-small edit" ng-click="editarItem($index)">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    </button>
                    <button class="btn btn-danger btn-small" ng-click="deleteItem($index)">
                    <i class="fa fa-trash-o" aria-hidden="true"></i>
                    </button>
                 </td>
              </tr>

我的 Controller 代码:

   var app = angular.module('myModule', ['dataGrid', 'pagination']);
app.controller('ListaComprasController',function($scope){    
        $scope.form = true;
        $scope.item = {};

        $scope.itens = [
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"tesr@sdasad.com"},
            {nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"tesr@sdasad.com"}
        ];

        $scope.adicionaItem = function () {
            $scope.itens.push(
                {
                    nombre: $scope.item.nombre, 
                    telefono: $scope.item.telefono, 
                    descripcion: $scope.item.descripcion,
                    especialidades: $scope.item.especialidades,
                    dirreccion: $scope.item.dirreccion,
                    horarioDesde: $scope.item.horarioDesde,
                    horarioHasta: $scope.item.horarioHasta,
                    checkCom: $scope.item.checkCom,
                    nombreCom: $scope.item.nombreCom,
                    apellidoCom: $scope.item.apellidoCom,
                    telefonoCom: $scope.item.telefonoCom,
                    emailCom: $scope.item.emailCom
                }
            );
            $scope.item.produto = $scope.item.quantidade = '';
            toastr.success("Item adicionado com sucesso.");
            $scope.form = true;
        };
        $scope.addItem = function () {
            $scope.form = false;
        };
        $scope.editarItem = function(index){
            $scope.form = false;
            $scope.item = $scope.itens[index];
            $scope.edit = true;
        };

        $scope.applyChanges = function(index){
            $scope.item = {};
            $scope.form = false;
            $scope.edit = false;
            toastr.success("Item alterado com sucesso.");
        };
        $scope.CancelarItem = function(index){
            $scope.edit = false;
            $scope.form = true;
            $scope.item = {};
        };
        $scope.deleteItem = function(index){
            $scope.itens.splice(index, 1);
            toastr.success("Item removido com sucesso.");
        };
        $scope.gridOptions = {
            data: [], //required parameter - array with data
            //optional parameter - start sort options
            sort: {
                predicate: 'nombre',
                direction: 'asc'
            }
            };

});

Answer 1

将此代码用于网格选项:

      $scope.gridOptions = {
            data: $scope.itens, //required parameter - array with data
            //optional parameter - start sort options
            sort: {
                predicate: 'nombre',
                direction: 'asc'
            }
        };