使用角度智能表开发页面。
需要向表中添加新行，目前新行在末尾添加。如何在表格的开头添加行？
这是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));
}
}
})();