Question

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

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

再次，位置也可以编辑！

现在我们改变某个对象的位置一次（角度按预期重新排列列表），然后改变两次。 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

在这里。

为什么代码表现得那样？

1 function abspath() { 2 pushd . > /dev/null; 3 if [ -d "$1" ]; then 4 cd "$1"; 5 dirs -l +0; 6 else 7 cd "`dirname \"$1\"`"; 8 cur_dir=`dirs -l +0`; 9 if [ "$cur_dir" == "/" ]; then 10 echo "$cur_dir`basename \"$1\"`"; 11 else 12 echo "$cur_dir/`basename \"$1\"`"; 13 fi; 14 fi; 15 popd > /dev/null; 16 }绑定到position输入。这首先使文本整数，然后在您开始输入时立即转换为字符串。然后排序变得奇怪，这就是它失败的原因。

我该如何解决这个问题？

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

type="number"

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

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

希望它有所帮助！

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

2 个答案:

为什么代码表现得那样？

我该如何解决这个问题？