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}
]
};
}
Here it goes.
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.
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.