7

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

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>

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

2 回答 2

6

就这样吧。

为什么代码会这样？

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

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

于 2015-05-05T21:34:13.537 回答
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以了解整个工作示例。

希望能帮助到你！

于 2015-05-05T21:46:21.700 回答