Question

我有带有CRUD操作和可排序标头的AngularJS表。当我将新行添加到表时，行正在跳转，并且表在编辑模式下进行排序。

我想在编辑模式下停止排序，只有在保存新行后才能排序。我在网上搜索修复这个问题，但没有任何帮助。

这是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

行为是正确的，因为在addNew中你在应用周期中添加1个空记录，然后再重新排序列表。

你有两种方法： 1）添加新项目时，创建sperate对象，并在提交时将其添加到列表中：

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

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

像这样有关注的问题，而不是混淆主要清单。

或者，如果你仍然想直接在主列表中添加它，我不建议你可以实现自定义过滤器，它始终保持顶部的空数据 - 在谓词方法中。

Answer 2

<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

MAke使用ng-disabled ..当你不想对值进行排序时将其设置为true，反之亦然

AngularJS表在编辑模式下停止排序

2 个答案: