如何向ngTable添加行

时间:2014-10-27 16:40:33

标签: angularjs ngtable

我正在尝试将类型选择中的数据添加到ngTable中的行。我正在使用常规引导表,但我需要能够在添加行后编辑数据。 INgTable有一个表可以做到这一点,所以我想切换。我不熟悉ngTable所以任何帮助都会很棒。 plunkr

   //Add New POD Row
$scope.data = [];
$scope.addRow = function () {
    $scope.data.push({
        'JobItemName': $scope.masterItem.MLItemCode,
        'JobItemDescription': $scope.masterItem.JobItemDescription,
    });
    $scope.masterItem.JobItemName = '';
    $scope.masterItem.JobItemDescription = '';
};
//Remove POD Row
$scope.removeRow = function (JobItemName) {
    var index = -1;
    var comArr = eval($scope.data);
    for (var i = 0; i < comArr.length; i++) {
        if (comArr[i].JobItemName === JobItemName) {
            index = i;
            break;
        }
    }
    if (index === -1) {
        alert("Something gone wrong");
    }
    $scope.data.splice(index, 1);
};

   $scope.tableParams = new ngTableParams({
            page: 1,            // show first page
            count: 10           // count per page
        }, {
            total: $scope.data.length, // length of data
            getData: function($defer, params) {
                $defer.resolve($scope.data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });

1 个答案:

答案 0 :(得分:2)

为什么要使用ngTable指令而不是这样:

<table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="row in table" ng-click="editMyRow(row)">
            <td ng-bind="row.column1"></td>
            <td ng-bind="row.column2"></td>
        </tr>
        </tbody>
    </table>

在这种情况下,每次编辑这些值时,您的表格都会实时更改。

控制器类似于:

angular.module('test').controller('blah', $scope){

 $scope.table = {};
 $scope.table.row = [];
 $scope.table.row.add({
      column1: '',
      column2: ''
 });

}