e-form add row presents at top of table - html

Question

I have an angularjs application and am using e-form to view/add/edit rows in a table. When I choose add, I would like the new row to present at the top of the list rather than the bottom of the list. Once the row is added, it should sort according to the sort order I have designed. But for usability, it's friendlier for the user if the new row is at the top of the page. Any ideas, suggestions, etc. greatly appreciated.
HTML:
<md-button type="button" class="md-accent md-raised" ng-click="searchText=undefined; addContributor()">+ Add Contributor</md-button>
</div>
</md-card-header-text><label>Search: <input ng-model="searchText"></label><button-xs ng-click="searchText=undefined">Clear</button-xs>
</md-card-header>
<md-card-content class="px-helper-pt-0">
<md-table-container>
<table md-table md-progress="vm.contributors">
<colgroup><col></colgroup>
<colgroup><col></colgroup>
<colgroup><col></colgroup>
<colgroup><col></colgroup>
<thead md-head md-order="vm.query.order">
<tr md-row>
<th ng-show=false md-column md-order-by="id" class="md-body-2"><span class="md-body-2">Id</span></th>
<th md-column md-order-by="name" class="md-body-2"><span class="md-body-2">Name</span></th>
<th md-column md-order-by="role" class="md-body-2"><span class="md-body-2">Role</span></th>
<th md-column class="md-body-2"><span class="md-body-2">Edit</span></th>
<th md-column class="md-body-2"><span class="md-body-2"></span></th>
</tr>
</thead>
<tr dir-paginate="item in vm.contributors | filter:{searchField:searchText} | itemsPerPage: 25 | orderBy: vm.query.order">
<td ng-show=false md-cell><span editable-text="item.id" e-disabled e-name="id" e-form="rowform">{{item.id}}</span></a></td>
<td md-cell><span editable-text="item.name" e-name="name" e-form="rowform">{{item.name}}</span></a></td>
<td md-cell><span editable-text="item.role" e-name="role" e-form="rowform">{{item.role}}</span></a></td>
<td style="white-space: nowrap">
<form editable-form name="rowform" onbeforesave="saveContributor($data, item.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == item">
<md-button type="submit" ng-disabled="rowform.$waiting" class="md-accent md-raised">save</md-button>
<md-button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">Cancel</md-button>
</form>
<div class="buttons" ng-show="!rowform.$visible">
<md-button type="button" class="md-primary md-raised" ng-click="rowform.$show()">edit</md-button>
<md-button class="md-warn md-raised" ng-confirm-message="Are you sure you want to delete?" ng-confirm-click="deleteContributor(item.id)">Delete</md-button>
</div>
</td>
</tr>
</table>
</md-table-container>
controller:
activate();
function activate() {
vm.promises = [getContributors()];
return $q.all(vm.promises).then(function() {
logger.info('Activation', 'Contributors Controller', 'Template Rendered');
});
}
vm.query = {
order: 'name'
};
$scope.deleteContributor = function(contributorId) {
contributorsFactory.deleteContributor(contributorId).then(function(status) {
console.log(status);
if (status !== 409) {
$mdToast.show($mdToast.simple().textContent('Deleted Contributor' + contributorId).theme('success').position('left top'));
contributorsFactory.deleteItemFromArrayById(contributorId, vm.contributors);
}
window.setTimeout(function() {window.location.reload();}, 1000);
});
};
$scope.saveContributor = function(data, id) {
contributorsFactory.updateContributor(JSON.stringify(data), id).then(function(res) {console.log(res);});
$mdToast.show($mdToast.simple().textContent('Form Saved').theme('success').position('left top'));
window.setTimeout(function() {window.location.reload();}, 1000);
};
$scope.addContributor = function() {
$scope.inserted = {
value: ''
};
vm.contributors.push($scope.inserted);
};
function getContributors() {
var item;
return dojo.contribCollection()
.then(function(data) {
vm.contributors = data;
angular.forEach(vm.contributors, function(e) {
e.searchField = e.id + ' ' + e.name + ' ' + e.role + ' ';

Answer 1

If you want new item display in the first . You can try use splice
vm.contributors.splice(0,0,itemyouwanpush)
And why you mixing $scope with controllerAs? Just use one . In html you change ng-click to
vm.addContributor()
And in controller
vm.addContributor()=function(){
vm.contributors.splice(0,0,itemyouwanpush)
}
And dont forget
var vm = this; in controller

Answer 2

This is the code that resolved the issue:
controller.js
vm.contributors.splice(0, 0, $scope.inserted = {name: '', role: ''});