Angular ng-filter

In this example below you will see how to do a Angular ng-filter with some HTML / CSS and Javascript

An example of Angular JS ng-filter directive

Thumbnail
This awesome code was written by achautard, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright achautard ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Angular ng-filter</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html ng-app="app">
  <div ng-controller="personController">
      <input type="text" ng-model="myFilter" placeholder="Type your filter here"/>
      <ul>
        <li ng-repeat="person in persons | orderBy: '+lastName' | filter: myFilter  ">
          {{ getFullName(person) }}
        </li>
      </ul>
  </div>
</html>
  <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/achautard/angular-ng-filter-aACru */
div {
  width: 100%;
  font-size: 40px;
  padding: 20px;
}

/*Downloaded from https://www.codeseek.co/achautard/angular-ng-filter-aACru */
angular.module("app", []).controller("personController", 
     function($scope){
  
  $scope.persons = [
    { "firstName": "Bradley", "lastName": "Farmer" },
    { "firstName": "Cathryn", "lastName": "Maldonado"},
    { "firstName": "John","lastName": "Cooper" },
    { "firstName": "Reid", "lastName": "Campos" },
    { "firstName": "Iva", "lastName": "Briggs" },
    { "firstName": "Vera", "lastName": "Byers" }
  ];
  
  $scope.getFullName = function(person) {
    return person.firstName + " " + person.lastName;
  }
  
});

Comments