CSS offset increments with AngularJS

Question

In my Angular app I have a div whose left offset I'd like to increase by 90px every time the slideThis() function gets called. In jQuery I'd do this by specifying something like left: '+=90', however as far as I can see there seems to be no equivalent or comparable method for doing that in AngularJS - or am I following the completely wrong approach?

HTML:

<div ng-style="myStyle"></div>

JS:

$scope.slideThis = function() {
    $scope.myStyle = {
        left: '+=90'
    }
}

Would really appreciate any advice on how to go about something like this!

Answer 1

You could do something like this where your controller keeps track of the position and updates the style accordingly.

HTML:

<input type="button" value="Move" ng-click="slideThis()"> 
<div ng-style="myStyle">Stuff to move</div>

Controller:

myApp.controller('MyCtrl', function ($scope) {    

    var pos = 0;
    $scope.slideThis = function() {
       pos += 90;

       $scope.myStyle = { 
          position: 'absolute',
          left: pos+'px'
    }
  };
});

Clearly you could use margin or padding instead with the same approach.

Demo here: http://jsfiddle.net/zKRLs/3/