AngularJS 编辑 orderby-属性时 orderby 不起作用

Question

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

ng-repeat 用于显示绑定到列表中每个对象的文本框，并应用以 "position" 作为参数的 orderby 过滤器。

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

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

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

这是fiddle：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);
            });
        }
    };
});

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

Answer 2

这是因为您的 position 属性绑定到文本值。就是说你position的值是通过input编辑后的字符串。

您需要创建自定义排序。

例如：

<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 了解整个工作示例。

希望对您有所帮助！

AngularJS 编辑 orderby-属性时 orderby 不起作用

AngularJS orderby doesn't work when orderby-property is edited

javascript

angularjs

angularjs-orderby

angularjs-model

为什么代码会这样？

我该如何解决这个问题？

AngularJS 编辑 orderby-属性 时 orderby 不起作用

AngularJS orderby doesn't work when orderby-property is edited

javascript

angularjs

angularjs-orderby

angularjs-model

为什么代码会这样？

我该如何解决这个问题？

AngularJS 编辑 orderby-属性时 orderby 不起作用