编辑orderby-property时AngularJS orderby不起作用答案

【问题标题】：AngularJS orderby doesn't work when orderby-property is edited编辑orderby-property时AngularJS orderby不起作用
【发布时间】：2015-05-05 21:11:13
【问题描述】：

我在我的范围内有一个对象列表，并且想要遍历它们，以按某些属性排序的方式显示它们的一些属性并更改它们。

ng-repeat 用于显示绑定到列表中每个对象的文本框，并应用了将“位置”作为参数的 orderby 过滤器。

再一次，位置也是可编辑的！

现在我们改变某个对象的位置一次（角度按预期重新排列列表）然后改变两次。 Angular 不会重新排序列表。

谁能解释一下如何解决这种只重新订购一次的情况以及这种行为的原因是什么？

这里是小提琴：JSFiddle

HTML

<div ng-controller="MyCtrl">
    <p>List of activities:</p>
    <div ng-repeat="activity in model.activities | orderBy: 'position'">
        <textarea type="text" ng-model="activity.name">

        </textarea>
        {{activity.name}}
        <input type="text" ng-model="activity.position">
    </div>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.model = { 
        activities: [
            {name: "activity 1", position: 1}, 
            {name: "activity 2", position: 2}, 
            {name: "activity 3", position: 3}, 
            {name: "activity 4", position: 4}, 
            {name: "activity 5", position: 5}
        ] 
    };
}

【问题讨论】：

标签： javascript angularjs angularjs-orderby angularjs-model

【解决方案1】：

来了。

为什么代码会这样？

position 绑定到 text 输入。这首先使文本整数，然后在您开始键入时立即转换为字符串。然后排序变得奇怪，这就是它失败的原因。

我该如何解决这个问题？

你有两个选择。第一个选择是将type="text" 更改为type="number" 然后它会起作用。如果这不是一个选项，您可以创建一个简单的指令（Angular 1.2 以上）

myApp.directive('integer', function() {
    return {
        require: 'ngModel',
        link: function(scope, el, attr, ctrl){
            ctrl.$parsers.unshift(function(viewValue){
                return parseInt(viewValue, 10);
            });
        }
    };
});

该代码所做的是将每个值解析为一个整数使其工作。

【讨论】：

谢谢，我的问题也是视图中的 int 被转换为字符串。

【解决方案2】：

这是因为您的 position 属性绑定到文本值。就是说你的位置的值通过输入编辑后变成了字符串。

您需要创建自定义排序。

例如：

<div ng-repeat="activity in getOrderedData()">
    {{activity.name}}
    <input type="text" ng-model="activity.position">
</div>

$scope.getOrderedData = function(){
    return $scope.model.activities.sort(compare);
};

var compare = function(a,b){
    if (parseInt(a.position) < parseInt(b.position))
         return -1;
    if (parseInt(a.position) > parseInt(b.position))
        return 1;
    return 0;
};

这适用于每个 AngularJS 版本。

请参阅JSFiddle 了解整个工作示例。

希望对你有帮助！

【讨论】：