AngularJS: How to freeze orderBy in ng-repeat during edit mode

Question

I'm using md-data-table and I have add sorting options based on column. Below, presented my 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 when the table is ordered by 'code' and I'm trying to edit the record's code, the order of records changing while you change the value of code. So, the result is very confused. I'm thinking if there is any way to freeze the order while I'm in edit mode.

Answer 1

Outsource your orderBy logic into your controller and make it block in edit mode by using a simple switch variable like in this example fiddle. I hope this working example will help you to implement this logic inside your application.

    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>