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>
  
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-animate.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller='testCtrl as ctrl'>
  <button ng-click='ctrl.toggle()'>toggle</button>
  <div class='item' ng-repeat='item in ctrl.items | limitTo: ctrl.limit'>{{item}}</div>
</body>
</html>
 
angular.module('app', ['ngAnimate'])
  .controller('testCtrl', function($scope) {
  var oldLimit,
      isOpen = false;
  
  this.items = ["hello", "world", "second", "third", "fourth", "fifth", "sixth", "seventh"];
  this.limit = 3;
  
  this.toggle = function() {
    if (isOpen) 
      this.limit = oldLimit;
    else {
      oldLimit = this.limit;
      this.limit = this.items.length;
    }
    
    isOpen = !isOpen;
  };
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers