angular js ng-table 基本示例答案

【问题标题】：angular js ng-table basic exampleangular js ng-table 基本示例
【发布时间】：2016-08-31 19:19:07
【问题描述】：

我正在使用流星，并试图实现 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});

  }

【问题讨论】：

如果您添加 ng-controller="tableControl as vm" 而不是 ng-controller="tableControl" 它应该可以按预期工作。
它正在创建小按钮，随着年龄的增长，很奇怪
不确定，为什么你会得到小按钮。您的代码应该可以工作。请看看这个fiddle。
是的对不起，它成功了，你是对的！谢谢

标签： javascript angularjs meteor

【解决方案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;
            });

        }
    });
}]);

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请edit您的回答添加解释并说明适用的限制和假设。