AngularJs排序顺序在ng-repeat中无法正常工作

排序在我的inputField上无法正常工作。点击inputField列后，数值得到排序，但问题是排序对于修改后的数值不正确，所有数值都在最后。我将model-change-blur添加到文本框中的模糊处理后进行排序。我不知道我在做什么错。修改后的值。AngularJs排序顺序在ng-repeat中无法正常工作

这是我的HTML代码：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
    <script type="text/javascript" src="js/bootstrap.min.js"></script> 
    <script type="text/javascript" src="js/myscript.js"></script> 
</head> 
<body ng-app="app" ng-controller="myController"> 
    <table class="table table-bordered"> 
     <thead> 
      <tr> 
      <th class="text-center" style="width: 65px;"> 
       <div href="#" ng-click="sortType = 'id'; sortReverse = !sortReverse"> 
        ID <span class="glyphicon sort-icon" ng-show="sortType=='id'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span> 
       </div> 
      </th> 
      <th class="text-center" style="width: 65px;"> 
       <div href="#" ng-click="sortType = 'checkBoxField'; sortReverse = !sortReverse"> 
        Checked <span class="glyphicon sort-icon" ng-show="sortType=='checkBoxField'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span> 
       </div> 
      </th> 
      <th class="text-center" style="width: 61px;"> 
       <div href="#" ng-click="sortType = 'inputField'; sortReverse = !sortReverse"> 
        Input <span class="glyphicon sort-icon" ng-show="sortType=='inputField'" ng-class="{'glyphicon-chevron-up':sortReverse,'glyphicon-chevron-down':!sortReverse}"></span> 
       </div> 
      </th> 
     </thead> 
     <tbody> 
      <tr ng-repeat="row in filtered = (tableData | orderBy:sortType:sortReverse)" id="row-{{$index}}"> 
       <td align="center" style="width: 68px;">{{row.id}}</td> 
       <td align="center" style="width: 68px;"><input id="checkBoxField-{{$index}}" type="checkbox" ng-model="row.checkBoxField" ng-true-value="'Y'" ng-false-value="'N'"/></td> 
       <td align="center" style="width: 61px;"><input id="inputField-{{$index}}" class="onlyNumber" type="text" ng-model="row.inputField" maxlength="3"style="width: 50px;" model-change-blur></td> 
      </tr> 
     </tbody> 
    </table> 
</body>

这里是我的js文件：

angular.module('app', []) 
.controller('myController', function($scope) { 
    $scope.sortType  = ''; 
    $scope.sortReverse = false; 

    $scope.tableData = []; 
    for(i=1; i<= 8; i++){ 
     $scope.tableData.push({"id":i,"checkBoxField": i%3==0 ,"inputField":1+i}); 
    } 
}) 
.directive('modelChangeBlur', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
      link: function(scope, elm, attr, ngModelCtrl) { 
      if (attr.type === 'radio' || attr.type === 'checkbox') return; 

      elm.unbind('input').unbind('keydown').unbind('change'); 
      elm.bind('blur', function() { 
       scope.$apply(function() { 
        ngModelCtrl.$setViewValue(elm.val()); 
       });   
      }); 
     } 
    }; 
});

更新：添加图像

不排序表看起来如下：

表格排序升序排列后的样子如下：

后修改的第三排顺序看起来像下面这里是问题：

修正值将最下面一行。

来源

2016-02-18 Rajesh Narravula

你想我之后留下的文本框右侧对数据进行排序？ –

@PareshGami是的，你是对的。 –

您的排序代码是好的..只是改变输入类型号..

<input id="inputField-{{$index}}" class="onlyNumber" type="number" ng-model="row.inputField" maxlength="3" style="width: 50px;" model-change-blur> </td>

你只是有一个空的默认排序列，只是改变这个定义默认值。你可以通过点击一个表头列来检查它，并且它会正确排序。

$scope.sortType  = 'inputField';

，或者你可以添加ng-init您table标签等。

ng-init = "sortType='inputField'"

我也建议定义一个order功能的清洁标记。

// code source https://docs.angularjs.org/api/ng/filter/orderBy 
$scope.sort = function(sortType) { 
    $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false; 
    $scope.sortType = sortType; 
    };

，并只需在您的标记，而不是

ng-click="sortType = 'inputField'; sortReverse = !sortReverse"

这

ng-click="sort('inputField')"

和初始代码要么

ng-init = "sort('inputField')"

或

sort('inputField')

plunk

来源

2016-02-18 07:48:38 Minato

默认情况下..它是空的..我的代码是在那里点击列我设置值'ng-click =“sortType ='inputField'; sortReverse =！sortReverse”' –

@Rajesh你知道当你点击别的东西..键入东西，然后点击框，它会相应地排序..只有当有一个sortType定义.. – Minato

@Rajesh我已经产生了一个简单的普及检查它..没有太大的改变的代码..但代码从头开始工作.. – Minato

-1

//change syntax of ng-repeat as follows 
    <tr ng-repeat="row in filtered = (tableData | orderBy:'-id')" id="row-{{$index}}"> 
// add - for reverse sorting

来源

2016-02-18 07:14:52

我想排序'inputField' –

-1

<tr ng-repeat="row in filtered = (tableData | orderBy:'-inputField')" id="row-{{$index}}">

来源

2016-02-18 07:30:04

不工作..请测试并发布您的答案..谢谢。 –

它在我的工作，我已经在发布之前对它进行了测试。 –

请修改'inputField'列的值，并且该值没有正确排序。 –

入住这其中也

https://docs.angularjs.org/api/ng/filter/orderBy

我只是做一个函数调用是当您从文本框离开。

$scope.changeData = function(predicate) 
{ 
    $scope.sortType = 'inputField' 
    $scope.sortReverse = true; 
}

这里检查有异常模糊通话

<tbody> 
    <tr ng-repeat="row in filtered = (tableData | orderBy:sortType:sortReverse)" id="row-{{$index}}"> 
     <td align="center" style="width: 68px;">{{row.id}}</td> 

     <td align="center" style="width: 68px;"> 
      <input id="checkBoxField-{{$index}}" type="checkbox" ng-model="row.checkBoxField" ng-true-value="'Y'" ng-false-value="'N'"/> 
     </td> 

     <td align="center" style="width: 61px;"> 
      <input id="inputField-{{$index}}" ng-blur="changeData(sortReverse)" class="onlyNumber" type="text" ng-model="row.inputField" maxlength="3"style="width: 50px;" model-change-blur> 
     </td> 
    </tr> 
</tbody>

来源

2016-02-18 09:58:33

如果可能请将它放在jsfiddle或Plunker –

修改完值后，我再次单击列标题，但仍未正确排序。 –

AngularJs排序顺序在ng-repeat中无法正常工作

回答

相关问题