AngularJs Filter Sample

by wales

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="https://code.angularjs.org/1.1.4/angular.js"></script>
<body ng-app ng-init="names=['IronMan', 'SpiderMan', 'SuperMan', 'Batman', 'Wales', 'Thor', 'Wes Alvaro', 'John Scott', 'Daniel Nadasi'];" class='col-xs-6'>
  <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" />
          <button type="submit" class="btn">Search</button>
        </div>
        <ul class="nav nav-pills nav-stacked">
          <li ng-animate="'animate'" ng-repeat="name in names  | filter:search ">
            <a href="#"> {{name| uppercase}} </a>
          </li> 
      </ul>
    </form>
  </div>
</body>

CSS

.animate-enter-setup, 
.animate-leave-setup
{ 
    -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-setup.animate-enter-start, 
.animate-leave-setup {
    opacity: 1;
    top: 0;
    height: 30px;
}
 
.animate-leave-setup.animate-leave-start,
.animate-enter-setup {
    opacity: 0;
    top: -50px;
    height: 0px;
}