javascriptangularjsfilterglobal-filter

Search Filters Not working. Angular Js

Hey guys my search filters are not working for some reason. You can check in this website! Like i dont understand why its wrong. I followed the tutorial exactly from this site. Please help!

Here is my code:

index.html:

<!DOCTYPE html>
<html lang= "en">

<head>
    <meta charset="UTF-8" />
    <title>Basic Login Form</title>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script src = "https://rawgit.com/nirus/Angular-Route-Injector/master/dist/routeInjector.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular-route.js"></script>
    <script type="text/javascript" src="main.js"></script>
</head>

<body ng-app = "app">

<div ng-controller = "people">
    <ul>
        <h2>Names And Ages of Programmers:</h2>
          <li ng-repeat = "person in persons | filter: searchBox">
            Name: {{person.Name}}<br>
            Age: {{person.Age}}<br>
            Favorite-Color : {{person.Fav_Color}}
          </li>

    </ul>
</div>
    <div id = "searchBoxes">
      Global Search Filter : "  <input type="text" ng-model="globalSearch.$"><br>
      Name Search Filter:   <input type="text" ng-model = "globalSearch.Name"><br>
      Age Search Filter:  <input type="text" ng-model = "globalSearch.Age"><br>
      Favorite Color Search Filter:  <input type="text" ng-model = "globalSearch.Fav_Color"><br>
    </div>
  </div>
</body>
</html>

main.js:

var filex = {
    "records" : [
        {
            "Name":"Something",
              "Age":"18",
              "Fav_Color" : "Orange"
        },
        {
            "Name": "Anonymus",
            "Age" : "???",
            "Fav_Color" : "Blue"
        }


    ]
}


var app = angular.module('app',[])

app.controller('people', function($scope){
      $scope.persons = filex.records
    })
Solution

  • You missed the input to which your filter is bound:

    <input type="text" ng-model="searchBox">

    Adding this is vital since the ng-model="searchBox" here is bound to your search results: <li ng-repeat = "person in persons | filter: searchBox"> here.

    Your search results are filtered based on model searchBox.

    JsBin example