On Click How Can I Cycle Through JSON One By One In AngularJS

Creating my first directive as an exercise in angular —making more or less a custom carousel to learn how directives work. I've set up a Factory with some JSON data: directiveA

Solution 1:

Since you only want the current user, the ng-repeat is not what you want to use, since that would be for each element in the data;

You would want to keep track of the index you are looking at in the scope, and increment that.

<div ng-controller="TestController">
    {{data[current].name}}
    <div ng-click="Next();"> NEXT! </div>
</div>

Where in the controller we also have these set up, where data is your actors:

$scope.current = 0;
$scope.Next = function() {
    $scope.current = ($scope.current + 1) % $scope.data.length;
};

Here's a fiddle where it's done.

Solution 2:

I would change my serivce to return a single actor and maintain the index in the controller. something like this. This is an incomplete solution - you need to take care of cycle etc...