Angular: Empty Fiddle

http://angularjs.org/

by Jens Kühn

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app ng-controller="MyCtrl">
  <div class="well" style="margin-top: 30px; width: 200px; overflow: hidden;">
    <form class="form-search">
      <div class="input-append">
        <input type="text" ng-model="search" class="search-query" style="width: 80px">
      </div>
      <ul class="nav nav-pills nav-stacked">
        <li ng-animate="'animate'" ng-repeat="name in names | filter:search">
          <a href="#"> {{name}} </a>
        </li>
      </ul>
    </form>
  </div>
</div>

CSS

/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');


.animate-enter,
.animate-leave {
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
}

.animate-enter.animate-enter-active,
.animate-leave {
  opacity: 1;
  top: 0;
  height: 30px;
}

.animate-leave.animate-leave-active,
.animate-enter {
  opacity: 0;
  top: -50px;
  height: 0px;
}

JavaScript

var myApp = angular.module('myApp', []);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {

  $scope.names = ['Igor Minar', 'Brad Green', 'Dave Geddes', 'Naomi Black', 'Greg Weber', 'Dean Sofer', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];

}