Angular

AngularJS basic search using filter

Angular JS

Basic search in AngularJS is comparative to jQuery other other javascript libraries. Angular filters are more powerful to filter the data. It basically works as condition and equality checks. The keyword ‘filter’ itself works to filter the data in angular template.

HTML

<!doctype html>
<html ng-app="webdesigncolors">
<body ng-controller="wdcBasicSearchController">
  <input type="text" ng-model="wdcBasicSearch" placeholder="Type to search">
  <ul>
    <li ng-repeat="item in items | filter:wdcBasicSearch">
      <a href="{{item.url}}" target="_blank">{{item.title}}</a>
    </li>
  </ul>
</body>
</html>

Javascript

angular
  .module("webdesigncolors", [])
  .controller('wdcBasicSearchController', function ($scope, $http) {
    $scope.items = [
      {'title': 'AngularJS', 'url': 'http://angularjs.org'},
      {'title': 'Sass', 'url': 'http://sass-lang.com'},
      {'title': 'Compass', 'url': 'http://compass-style.org'}
    ];
  });