编辑orderby-property时,AngularJS orderby不起作用

Question

我在我的范围内有一个对象列表,并希望迭代它们,以有序的属性方式显示它们的一些属性并更改它们.

ng-repeat用于显示绑定到列表中每个对象的文本框,以及使用"position"作为参数的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>

JS

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}
        ] 
    };
}

Answer 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);
            });
        }
    };
});

该代码的作用是将每个值解析为一个整数,使其工作.