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>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body data-ng-app="moviesApp">
  <section ng-controller="SearchCtrl" class="main-wrapper">
    <article class="search-bar-wrapper">
      <input type="text" ng-model="searchBar" class="search-bar">
      <div class="dropdown-wrapper">
        <span>Label</span>
        <select ng-model="selectedGenre"
                ng-options="choice as choice for (idx, choice) in genres.split(',')"
                ng-change="handleSelect()"
                name="genre"
                class="genre-dropdown">
          <!-- <option selected="selected" disabled value="All">All</option> -->
          <option value="Action">Action</option>
          <option value="Adventure">Adventure</option>
          <option value="Animation">Animation</option>
          <option value="Biography">Biography</option>
          <option value="Comedy">Comedy</option>
          <option value="Crime">Crime</option>
          <option value="Drama">Drama</option>
          <option value="Fantasy">Fantasy</option>
          <option value="History">History</option>
          <option value="Horror">Horror</option>
          <option value="Romance">Romance</option>
          <option value="Sci-Fi">Sci-Fi</option>
          <option value="Western">Western</option>
        </select>
      </div>
    </article>
​
    <table class="search-results-wrapper">
      <thead>
        <tr>
          <td>
            <a href="#" ng-click="sortType = 'title'; sortReverse = !sortReverse">
              Title
              <span ng-show="sortType == 'title' && !sortReverse" class="carat-down"></span>
              <span ng-show="sortType == 'title' && sortReverse" class="carat-up"></span>
            </a>
          </td>
          <td>
            <a href="#" ng-click="sortType = 'director'; sortReverse = !sortReverse">
              Director
              <span ng-show="sortType == 'director' && !sortReverse" class="carat-down"></span>
              <span ng-show="sortType == 'director' && sortReverse" class="carat-up"></span>
            </a>
          </td>
          <td>
            <a href="#" ng-click="sortType = 'length'; sortReverse = !sortReverse">
              Length
              <span ng-show="sortType == 'length' && !sortReverse" class="carat-down"></span>
              <span ng-show="sortType == 'length' && sortReverse" class="carat-up"></span>
            </a>
          </td>
          <td>
            <a href="#" ng-click="sortType = 'year'; sortReverse = !sortReverse">
              Year
              <span ng-show="sortType == 'year' && !sortReverse" class="carat-down"></span>
              <span ng-show="sortType == 'year' && sortReverse" class="carat-up"></span>
            </a>
          </td>
          <td>
            <a href="#" ng-click="sortType = 'genre'; sortReverse = !sortReverse">
              Genre(s)
              <span ng-show="sortType == 'genre' && !sortReverse" class="carat-down"></span>
              <span ng-show="sortType == 'genre' && sortReverse" class="carat-up"></span>
            </a>
          </td>
        </tr>
      </thead>
​
      <tbody>
        <tr ng-repeat="movie in movies | filter:searchBar | orderBy:sortType:sortReverse">
          <td>{{ movie.title }}</td>
          <td>{{ movie.director }}</td>
          <td>{{ movie.length }}</td>
          <td>{{ movie.year }}</td>
          <td>{{ movie.genre }}</td>
        </tr>
      </tbody>
    </table>
​
  </section>
</body>
</html>
Output

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

Dismiss x
public
Bin info
josectellopro
0viewers