angularjs - 新记录未在表视图中插入 - Thinbug

新记录未在表视图中插入

时间：2018-04-19 06:40:43

标签： angularjs

您好我是Angular-Js的初学者，我正在尝试显示表格视图并提供添加新记录的功能，但问题是当我尝试添加新记录数据时未插入且我的代码是下面。

我犯了什么错误？

有人可以帮助我。

我按照以下链接执行我的要求：

https://lorenzofox3.github.io/smart-table-website/

index.html的： -

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="smart-table.js"></script>
    <script src="IrInfiniteScrollPlugin.js"></script>
  </head>

  <body>
  <div ng-app="myApp" ng-controller="safeCtrl">

        <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
            <i class="glyphicon glyphicon-plus">
            </i> Add random item
        </button>

        <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
            <thead>
            <tr>
                <th st-sort="firstName">first name</th>
                <th st-sort="lastName">last name</th>
                <th st-sort="birthDate">birth date</th>
                <th st-sort="balance">balance</th>
            </tr>
            <tr>
                <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in displayedCollection">
                <td>{{row.firstName}}</td>
                <td>{{row.lastName}}</td>
                <td>{{row.birthDate}}</td>
                <td>{{row.balance}}</td>
                <td>
                <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                    <i class="glyphicon glyphicon-remove-circle">
                    </i>
                </button>
                </td>
            </tr>
            </tbody>
        </table>
  </div>
 </body>
 </html>

app.js：

angular.module('myApp', []).controller('safeCtrl', function($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }

    //add to the real data holder
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };

    //remove to the real data holder
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
});

1 个答案:

答案 0 :(得分：0)

您需要将功能更改为：

//add to the real data holder
$scope.addRandomItem = function() {
    $scope.rowCollection.push(generateRandomItem(id));
    id++;
};

//remove to the real data holder
$scope.removeItem = function(row) {
    var index = $scope.rowCollection.indexOf(row);
    if (index !== -1) {
        $scope.rowCollection.splice(index, 1);
    }
}

当您使用语法$scope.functionName = function()声明范围内的函数时，您不需要在function()之后右侧编写functionName。