Question

我正在使用meteor，并试图实现ng-tables网站上提供的基本示例。但是，数据不仅仅显示在过滤器和排序框中。

<body ng-app="myApp">
  <h1>#best programmer</h1>
  <p>interns rock!</p>
  <div ng-controller="tableControl">
    <table ng-table="vm.tableParams" class="table" show-filter="true">
      <tr ng-repeat="user in $data">
          <td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
              {{user.name}}</td>
          <td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
              {{user.age}}</td>
      </tr>
  </table>
</div>


</body>

<link rel="stylesheet" href="https://cdn.rawgit.com/esvit/ng-table/v1.0.0/dist/ng-table.min.css">

JS代码

import angular from 'angular';
import angularMeteor from 'angular-meteor';

import './index.html';

angular.module("myApp", ["ngTable"])
  .controller('tableControl', tableControl);
  tableControl.$inject = ["NgTableParams"];

   function tableControl (NgTableParams) {

    var self = this;
    var data = [{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50},{name: "Moroni", age: 50} /*,*/];
    self.tableParams = new NgTableParams({
              page: 1, // show first page
              count: 10 // count per page
    }, { dataset: data});

  }

Answer 1

```html
<div class="row">
  <div class="container-fluid">
    <div class="panel panel-default">
      <div class="panel-body">
        <table ng-table="tableParams" class="table table-bordered">
          <tbody>
            <tr ng-repeat="row in data">
              <td data-title="'S.No'" align="right">{{$index+1}}</td>
              <td data-title="'EmpCode'">{{ row.EmpCode }}</td>
              <td data-title="'FirstName'">{{ row.FirstName }}</td>
              <td data-title="'LastName'">{{ row.LastName }}</td>
              <td data-title="'Actions'" align="center">
                <a role="menuitem" tabindex="-1" data-toggle="modal" ng-click="editDetails(row)" data-target="#AddEditModal">
                  <i class="fa fa-edit"></i>
                </a>
    
                <a role="menuitem" tabindex="-1" data-toggle="modal" ng-click="deleteDetails(row)" data-target="#deleteModal">
                  <i class="fa fa-trash"></i>
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
````
var myApp = angular.module('myApp', ['ngRoute', 'ngTable']);
myApp.controller('employeeController', ['$http', '$scope', 'ngTableParams',
    function ($http, $scope, ngTableParams) {
        } 
    
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 5          // count per page
    }, {
        total: 0, // length of data
        getData: function () {
            $http({
                method: 'GET',
                url: serviceBasePath + '/api'
            }).success(function (result) {
                $scope.data = result;
            });

        }
    });
}]);

angular js ng-table基本示例

1 个答案: