绑定智能表值并编辑行

Question

使用角度智能表开发页面。

需要在表中添加新行，目前新行正在添加。如何在表格的开头添加行？

这是html页面

<style>
.sortable {
    cursor: pointer;
}
.sortable:after {
    content: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIUnC2nKLnT4or00PvyrQwrPzUZshQAOw==);
    padding-left: 1em;
}
.st-sort-ascent:after {
    content: '\25B2';
}
.st-sort-descent:after {
    content: '\25BC';
}
</style>

<div ng-controller="AppSettingsController as appCtrl">
        <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 class="sortable" st-sort="parameterkey">Parameter Key</th>
                <th class="sortable" st-sort="description">Description</th>
                <th class="sortable" st-sort="value">Value</th>
                <th class="sortable" st-sort="type">Type</th>
                <th class="sortable" st-sort="active">Active</th>
                <th class="sortable" st-sort="action">Action</th>
            </tr>
            <tr>
                <th colspan="6"><input st-search="" class="form-control" placeholder="global search ..." type="text"/></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="row in displayedCollection">
                <td editable-text="row.key" ng-model="appCtrl.param.key">{{row.key}}</td>
                <td>{{row.description}}</td>
                <td>{{row.value}}</td>
                <td>{{row.type}}</td>
                <td>{{row.activeYn}}</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 style="padding-bottom: 10px; padding-left: 5px; padding-right: 5px;">
            <button class="btn btn-primary" type="submit"
               style="float: right; margin-right: 5px;" ng-click="appCtrl.save()">Submit</button>
         </div>
    </div>

这是js页面

(function () {
    'use strict';
    angular.module('app.controllers')
        .controller("AppSettingsController",  AppSettingsController);

    AppSettingsController.$inject = ['$scope','$http','LookupService','$filter'];
    function AppSettingsController($scope,$http,LookupService,$filter){
        var vm = this;

        vm.param={};
        $http({
            method: 'GET',
            url: 'param/getAllAppParam',
        }).then(function(resp){
            if(resp.data.result != null && resp.data.result != undefined && resp.data.code == 0 && resp.data.result!=false){
                $scope.rowCollection = [];
                $scope.rowCollection = resp.data.result;
                $scope.displayedCollection = [].concat(vm.rowCollection);
            }
            else{
                vm.successMsg = "";
                vm.errorMsg = "Error occured in Server..!User Could not be saved..!";
                console.log(vm.errorMsg);
                vm.saved = false;
            }
        });

            //copy the references (you could clone ie angular.copy but then have to go through a dirty checking for the matches)
           // $scope.displayedCollection = [].concat($scope.rowCollection);

            //add to the real data holder
            $scope.addRandomItem = function addRandomItem() {
                $scope.rowCollection.push({
                    "paramId": "",
                    "value": "",
                    "activeYn": "",
                    "description": "",
                    "type": "",
                    "query": "",
                    "key": ""
                  });
            };

            //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);
                }
            }


            vm.save = function(){
                console.log("here");
                console.log(JSON.stringify(vm.param));
            }
    }

    })();

Answer 1

您应该使用unshift代替push

$scope.addRandomItem = function addRandomItem() {
            $scope.rowCollection.unshift({
                "paramId": "",
                "value": "",
                "activeYn": "",
                "description": "",
                "type": "",
                "query": "",
                "key": ""
              });
        };