Angular ng-filter

An example of Angular JS ng-filter directive

<!DOCTYPE html>
<html >
<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/ */
div {
  width: 100%;
  font-size: 40px;
  padding: 20px;
}
/* Downloaded from https://www.codeseek.co/ */
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;
  }
  
});

This awesome code ( Angular ng-filter ) is write by Alain Chautard, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Alain Chautard