How to write a function using ng-click to move through indexes of an array

Question

I would like to show a set of limited data. And have pagination interaction. How do I write a function: nextActor() to display the next actor[index] when user clicks on <button ng-click="nextActor()"></button>

I have a filter of limitTo: 1 on ng-repeat in hopes to only show 1 actor at a time

<div ng-controller="actorsCtrl">
  <div ng-repeat="actor in actors.detail | limitTo: 1">
    <p>{{actor.name}} </p>
    <button ng-click="nextActor()"></button>
  </div>
</div>

I have a service of data:

directiveApp.factory("Actors", function(){
    var Actors = {};
    Actors.detail = [
    {
      "name": "Russel Brand",
      "profession": "Actor",
      "yoga": [
        "Bikram",
        "Hatha",
        "Vinyasa"
      ]
    },
    {
      "name": "Aaron Bielefeldt",
      "profession": "Ambassador",
      "yoga": [
        "Bikram",
        "Vinyasa"
      ]
    },
    {
      "name": "Adrienne Hengels",
      "profession": "Ambassador",
      "yoga": [
        "Hatha",
        "Vinyasa"
      ]
    }
  ];
  return Actors;

});

And a very simple controller:

//creating a controller
function actorsCtrl($scope, Actors) {
   $scope.actors = Actors;
}

Matt Zeunert · Accepted Answer · 2013-12-07 20:49:26Z

2

As far as I know you can't pass a start index to limitTo, but you could do this without ng-repeat:

function actorsCtrl($scope, Actors) {
    $scope.actors = Actors;     
    $scope.index = 0;
    $scope.nextActor = function(){
        scope.index++;
    }
}

And do this in the html:

<p>{{actors.detail[index].name}} </p>
<button ng-click="nextActor()"></button>

answered Dec 7, 2013 at 20:49

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:21:39Z

2

I wouldn't solve it this way.

Here are some ideas:

solve it via ng-view (oder ui-view -> Angular UI Router) instead of ng-repeat (if you don't know how: ask)
Solve it via ng-show/ng-hide and only show, hide the actual element. As ng-repeat has an $index (http://docs.angularjs.org/api/ng.directive:ngRepeat) you can build pagination with this. Just have a variable which is increased with every button click. Similar to Matts solution on this page (https://stackoverflow.com/a/20446461/1367646)
You may also write your own filter (maybe "offset")

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Dec 7, 2013 at 20:58

Sebastian Gärtner

1245 bronze badges

Collectives™ on Stack Overflow

How to write a function using ng-click to move through indexes of an array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related