AngularJS ng-repeat with search

AngularJS ng-repeat with search.markdown

AngularJS ng-repeat with search

AngularJS lets you easily do a instant search if you say save your data as JSON. The elegant way that it is coded and the performance I find great. The JSON data I use, I have collected from Danish streaming TV service YouBio. I use bootstrap 3 to control the markup/layout.

Forked from Sten Hougaard's Pen AngularJS ng-repeat with search.

A Pen by Ashish Vishwakarma on CodePen.

License.

index.html

<div class="container">
  <div class="row">
    <h1 class="col-md-12">AngularJS <code>ng-repeat</code> with search</h1>
    <blockquote>AngularJS lets you easily do a <em>instant search</em> if you say save your data as <code>JSON</code>. The elegant way that it is coded and the performance I find great. The <code>JSON</code> data I use, I have collected from Danish streaming TV service
      <a href="http://yousee.tv/film">YouBio</a>. I use <code>bootstrap 3</code> to control the markup/layout. <br />
      <code>2014/11/14</code> Added link to watch the movie on YouSee Play (not free).</blockquote>
  </div>
</div>
<div ng-app="myApp" ng-controller="Example">
  <div class="container controls">
    <div class="row">
      <div class="col-md-12">
        <form action="" method="POST" role="form">
          <legend>Find a movie from <a href="http://yousee.tv/film">YouBio</a></legend>
          <div class="input-group">
            <input type="search" id="search" class="form-control" ng-model="search">
            <div class="input-group-addon">Found {{(movies | filter:search).length}} of {{movies.length}}</div>
            <div class="input-group-addon "><input type="checkbox" ng-model="reverse" value="true" id="reverse" /><label for="reverse">Reverse</label></div>
            <div class="input-group-addon "><input type="checkbox" ng-model="list" value="true" id="reverse" /><label for="list">List</label></div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="container result">
    <div ng-class="list ? 'col-md-6' : 'col-md-4'" class="movie" ng-repeat="movie in movies | filter:search | orderBy:'title':reverse">
      <a href="https://film.youseeplay.dk/search/{{movie.title}}" target="_blank">
        <img ng-class="list ? 'col-md-2' : 'col-md-12'" ng-src="{{movie.src}}" alt="Click to play {{movie.title}} on YouSee Play (not free)" title="Click to play {{movie.title}} on YouSee Play (not free)" class="img-thumbnail" /></a>
      <h4 ng-class="list ? 'col-md-10' : 'col-md-12'">{{movie.title}}</h4>
    </div>
  </div>
</div>

script.js

angular.module("myApp",["ngSanitize"])
.filter('replace', function () {
    var pat = / /gi;
    return function (text) {
        var clean = text.replace(pat, "-");
        var temp = clean.split("---");
        if (temp.length>1) {
          clean = temp[0];
        }
        return clean;
    };
})
.controller("Example", function($scope, $interval) {
  $scope.search = "orig";
  $scope.movies = youMovie;
  $scope.reverse = false;
  $scope.list = false;
});  
//document.querySelector('#search').focus();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3260327/youMovie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>

style.css

body {
  background: #eee;
}
.controls {
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.container {
  background: white;
}
.container .row blockquote {
  border-left: 0px !Important;
}
 
.movie {
  padding-top: 10px;
 /* min-height: 420px;*/
}

.result>div.col-md-4 {
  min-height: 550px;
}
.result>div.col-md-6 {
  min-height: 120px;
}

styles

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.css" rel="stylesheet" />