Таблица AngularJS прекращает сортировку в режиме редактирования

Question

У меня есть таблица AngularJS с операциями CRUD и сортируемым заголовком.Когда я добавляю новую строку в таблицу, строки пересекаются, и таблица сортируется в режиме редактирования.

Я хочу прекратить сортировку, находясь в режиме редактирования, и должен сортировать только после сохранения новой строки.Я искал в Интернете решение этой проблемы, но пока ничего не помогло.

Вот файл HTML:

<thead>   
    <tr>
         <td><input type="text" ng-model="main.search.Data1" id="myInput" placeholder="search for Data1..."/></td>
         <td><input type="text" ng-model="main.search.Data2" id="myInput" placeholder="search for Data2..."/></td>
       </tr>

       <tr class="table_header" style="background-color: blue;">
          <th><a href="#" ng-click="orderByField='data1'; reverseSort = !reverseSort"> Data1 <span ng-show ="!reverseSort">^</span><span ng-show="reverseSort">v</span></th>
          <th><a href="#" ng-click="orderByField='data2'; reverseSort = !reverseSort"> Data2</th>
       </tr> 
</thead>

<tbody>
   <tr ng-repeat=" code in main.Table | orderBy: Predicate | orderByField:reverseSort | filter:main.search"></tr>

   <script type="text/ng-template" id="dispay">
     <td>{{code.data1}}</td>
     <td>{{code.data2}}</td> 
   </script>

   <script type="text/ng-template" id="edit">
     <td><input type="text" ng-model="code.data1" class"form-control input-sm"/></td>
     <td><input type="text" ng-model="code.data2" class"form-control input-sm"/></td>
   </script>
</tbody>

Вот код JS:

//add new row
$scope.addNew = function(data) {
  $scope.Table.unshift({
    data1: "",
    data2: ""
  });
  console.log($scope.table);
};

//Edit the row
$scope.edit = function(data){
  $scope.selected = angular.copy(data);
  $scope.backuplist = angular.copy($scope.table);
};

Answer 1

<tr class="table_header" style="background-color: blue;">
          <th><a href="#" ng-click="orderByField='data1'; reverseSort = !reverseSort" ng-disabled="setTrueFalse"> Data1 <span ng-show ="!reverseSort">^</span><span ng-show="reverseSort">v</span></th>
          <th><a href="#" ng-click="orderByField='data2'; reverseSort = !reverseSort" ng-disabled="setTrueFalse"> Data2</th>
       </tr> 

---

$scope.setTrueFalse = true/false

MAG Используйте ng-disabled. Установите значение true, если вы не хотите сортировать значения, и наоборот

Answer 2

Поведение является правильным, потому что в addNew вы добавляете 1 пустую запись в цикле применения, которая затем будет переупорядочивать список.

У вас есть 2 способа пойти: 1) При добавлении нового элемента создайте вспомогательный объект ипосле отправки добавьте его в список:

 $scope.addNew = function(data) {
  $scope.newItem ={
    data1: "",
    data2: ""
  };
};

$scope.save = function() {
  $scope.table.push($scope.newItem);
}; 

Таким образом, существует множество проблем, а не смешивать основной список.

Или, если вы все еще хотите добавить его в основной список напрямуюкоторый я не рекомендую, вы можете реализовать свой собственный фильтр, который всегда держит пустые данные наверху - в вашем методе предиката.