Question

排序在我的inputField上无法正常工作。单击inputField列后，值已排序，但问题是对修改后的值排序不正确，所有值都在底部。我正在添加model-change-blur以在模糊到文本框后排序。我不知道我在哪里做错了。修改后的值。

这是我的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());
                });         
            });
        }
    };
});

更新：添加图片

没有排序表如下所示：

排序表升序后如下所示：

修改后的第3行订单如下所示是问题：

修改后的值会转到最后一行。

Answer 1

您的排序代码很好..只需将输入类型更改为数字..

<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

Answer 2

同时检查一下

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

我只是创建了一个从文本框离开时调用的函数。

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

并在此检查ng-blur如何调用

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

Answer 3

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

Answer 4

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

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

4 个答案: