Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<title>JS Bin</title>
</head>
<body>
  <div ng-controller="actorsCtrl">
    <button ng-click="next_actor()">Next</button>
    <button ng-click="prev_actor()">Prev</button>
    <h4>{{i}} Details for {{actor.name}} </h4>
    <p>{{actor.profession}}</p>
    <ul ng-repeat='x in actor.yoga'>
      <li>{{x}}</li>
    </ul>
  </div>
</body>
</html>
 
var app = angular.module('app',[]);
​
app.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 {
    get_actor : function(i) { 
        return Actors.detail[i];
    }
  };
});
​
app.controller('actorsCtrl',['$scope','Actors',function(scope,actors) {
  scope.i = 0;
  
  scope.get_actor = function() { 
    scope.actor = actors.get_actor(scope.i);
  };
  
  scope.next_actor = function() {
    scope.i++;
    scope.actor = actors.get_actor(scope.i);
  };
  
  scope.prev_actor = function() {
    scope.i--;
    scope.actor = actors.get_actor(scope.i);
  };
  
  scope.actor = scope.get_actor();
}]
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers