javascriptangularjsangularjs-orderbyangularjs-model

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


I have a list of objects in my scope and want to iterate over them, show some of their properties in ordered-by-some-property way and change them.

ng-repeat is used to display textboxes binded to each object of my list and orderby filter which takes "position" as a parameter is applied.

Once again, position is also editable!

Now we change position of certain object once(angular reorders the list as expected) and then change twice. Angular does not reorder the list.

Could anyone explain how it is possible to fix this reorder-only-once situation and what are the reasons for such a behaviour?

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

Solution

  • Here it goes.

    Why does the code behave like that?

    position is bound to a text input. That makes the text integers at first and then translated into Strings as soon as you start to type. Then the ordering becomes odd and that's why it fails.

    How do I fix this?

    You have two options. First option is to change type="text" by type="number" then it'll work. If that's not an option you can create a simple directive (Angular 1.2 onwards)

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

    What that code does is to parse every value into an integer making it work.