AngularJS: how to freeze orderBy in ng-repeat in edit mode

Question

I am using md-data-table and I have column based sort options. Below is the html (pug format) code:

table(md-table md-row-select multiple='' ng-model='vm.selected' md-progress='promise')
 //- columns
 thead(md-head class='back-color')
   tr(md-row)
     th(md-column ng-click='vm.orderingBy(name)')
       span Name
     th(md-column ng-click='vm.sortingBy(code)')
       span Code
 //- rows
 tbody(md-body)
   tr(md-select='record' md-select-id='id' ng-repeat='record in vm.records | orderBy:vm.orderByColumn)
     //- name
     td(md-cell)
       p(ng-hide='vm.columns.edit') {{record.name}}
       md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
         input(ng-model='record.name' md-select-on-focus)
     //- code
     td(md-cell)
       p(ng-hide='vm.columns.edit') {{record.sorting_code}}
       md-input-container(ng-if='vm.columns.edit' class='no-errors-spacer md-no-margin')
         input(ng-model='record.code' md-select-on-focus)

My AngularJS (Javascript) code, presented below:

vm.orderByColumn = 'name';
vm.orderingBy = function(ordering) {
  vm.orderByColumn = ordering;
}

The problem is that the table is sorted by "code", and I'm trying to change the record code, the order in which the records change is changed when the code value changes. So the result is very confused. I think if there is a way to freeze an order while I'm in edit mode.

Answer 1

orderBy , , , .

    var myApp = angular.module('myApp',[]);

    myApp.controller('MyCtrl', function ($scope, orderByFilter) {

        $scope.edit = false;
        $scope.data =  [{
            name: 'Frank'
        },{
            name: 'Peter'
        },{
            name: 'Basti'
        },{
            name: 'Sven'
        },{
            name: 'Franky'
        },{
            name: 'Sveny'
        },{
            name: 'bob'
        }];

        $scope.order = {
            column: '',
            revers: false
        }

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

        $scope.orderBy = function (column) {

          if (!$scope.edit) {
            $scope.order.column = column;
            $scope.order.reverse = !$scope.order.reverse; //toggle revers
            $scope.data = orderByFilter($scope.data, $scope.order.column, $scope.order.reverse);
          }
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
      <div>
          <h3 ng-click="orderBy('name')">
           Name
          </h3>
          <p ng-repeat="item in data">
            <input type="text" ng-model="item.name" ng-if="edit" />
            <span ng-if="!edit">{{ item.name }}</span>
          </p>
      </div>
      <button ng-click="toggleEditMode()">
          Toggle edit mode
      </button>
    </div>
</div>

Answer 2

, . , $ filter,

:

                                <tr ng-repeat="schedule in schedules | orderBy:filerTable2:filterasc track by $index">

                                <tr ng-repeat="schedule in schedules">

setFiler , .

$scope.setFiler = function(filter){

        if($scope.filerTable2 == filter){
            $scope.filterasc = !$scope.filterasc;
        }
        else{
            $scope.filerTable2 = filter;
            $scope.filterasc = false;
        }

        $scope.schedules = $filter('orderBy')($scope.schedules, filter, $scope.filterasc);
};