Как показать вновь добавленную запись в верхней строке ng-сетки?

Question

У меня есть ng-сетка, когда я добавляю запись, в которую строка вставлена ​​в нижней части сетки, я хочу отобразить вновь добавленную строку в верхней части моей сетки, чтобы пользователь мог узнать, какие данные добавляются.

вот мой app.js

var app = angular.module('myApp', ['ngGrid']); 
app.controller('MyCtrl', function($scope, $http) { 

    $scope.filterOptions = { 
     filterText: "", 
     useExternalFilter: true 
    }; 

    $scope.totalServerItems = 0; 
    $scope.pagingOptions = { 
     pageSizes: [5, 10, 20], 
     pageSize: 5, 
     currentPage: 1 
    }; 
    $scope.setPagingData = function(data, page, pageSize){ 
     var pagedData = data.slice((page - 1) * pageSize, page * pageSize); 
     $scope.myData = pagedData; 
     $scope.totalServerItems = data.length; 
     if (!$scope.$$phase) { 
      $scope.$apply(); 
     } 
    }; 
    $scope.getPagedDataAsync = function (pageSize, page, searchText) { 
     setTimeout(function() { 
      var data; 
      if (searchText) { 
       var ft = searchText.toLowerCase(); 
       $http.get('largeLoad.json').success(function (largeLoad) { 
        data = largeLoad.filter(function(item) { 
         return JSON.stringify(item).toLowerCase().indexOf(ft) != -1; 
        }); 
        $scope.setPagingData(data,page,pageSize); 
       }); 
      } else { 
       $http.get('largeLoad.json').success(function (largeLoad) { 
        $scope.setPagingData(largeLoad,page,pageSize); 
       }); 
      } 
     }, 100); 
    }; 

    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage); 

    $scope.$watch('pagingOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal && newVal.currentPage !== oldVal.currentPage) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 

    $scope.$watch('filterOptions', function (newVal, oldVal) { 
     if (newVal !== oldVal) { 
      $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage, $scope.filterOptions.filterText); 
     } 
    }, true); 

    $scope.edit = function (row) { 
     row.entity.edit = !row.entity.edit; 
    }; 

    $scope.gridOptions = { 
     data: 'myData', 
     enableRowSelection: true, 
     showGroupPanel: true, 
     enableCellSelection: false, 
     jqueryUIDraggable: true, 
     enablePaging: true, 
     showFooter: true, 
     totalServerItems:'totalServerItems', 
     pagingOptions: $scope.pagingOptions, 
     filterOptions: $scope.filterOptions, 
     columnDefs: [{ 
      field: 'nm', 
      displayName: 'Name', 
      cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' + 
      '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.nm"/></div></div>' 
     }, 
      { 
      field: 'cty', 
      displayName: 'city', 
      cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' + 
      '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.cty"/></div></div>' 
     }, 
      { 
      field: 'hse', 
      displayName: 'Address', 
      cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' + 
      '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.hse"/></div></div>' 
      }, 

      { 
       field: 'yrs', 
       displayName: 'PinCode', 
       cellTemplate: '<div class="ngCellText"><div ng-show="!row.entity.edit">{{row.getProperty(col.field)}}</div>' + 
       '<div ng-show="row.entity.edit" class="ngCellText"><input type="text" ng-model="row.entity.yrs"/></div></div>' 
      }, 
     { 
      displayName: 'Edit', 
      cellTemplate: '<button id="editBtn" type="button" class="btn btn-primary" ng-click="edit(row)" >Modify</button> ' 

     }, 
      { 
       displayName: 'Remove', 
       cellTemplate: '<button id="removebtn" type="button" class="btn btn-primary" ng-click="removeRow($index)" >Remove</button> ' 
      } 

    ] 
    }; 

    $scope.removeRow = function() { 
     var index = this.row.rowIndex; 
     $scope.gridOptions.selectItem(index, false); 
     $scope.myData.splice(index, 1); 
    }; 

Это моя addRow функция; когда эта функция запускается на выполнение ряд Вставляется в нижней части сетки я хочу, чтобы эта новая строка будет отображаться в верхней части большинства всякий раз, когда кнопка добавления щёлкнули

$scope.addRow = function() { 
     $scope.myData.push({nm: 'abc', cty: 0 , hse:'abcd' , yrs:2014}); 
    }; 

}); 

вот мой код на plunker: http://plnkr.co/edit/QbsQ6uDgNxts9TUMERj2?p=info

Answer 1

Когда вы вводите данные в массив, javascript всегда будет помещать его в конец. Одним из возможных решений было бы использовать вместо unshift из push:

Метод

unshift() добавляет новые элементы в начало массива, а возвращает новую длину.