Фильтры поиска не работают. Угловой Js

0

Эй, ребята, мои фильтры поиска почему-то не работают. Вы можете зарегистрироваться на этом сайте! Как будто я не понимаю, почему это неправильно. Я следил за учебником именно с этого сайта. Пожалуйста помоги!

Вот мой код:

index.html:

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

<head>
    <meta charset="UTF-8" />
    <title>Basic Login Form</title>
    <script data-require="[email protected]" 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
    })
Теги:
filter

1 ответ

1
Лучший ответ

Вы пропустили вход, связанный с вашим фильтром:

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

Добавление этого очень важно, так как ng-model="searchBox" здесь привязана к вашим результатам поиска: <li ng-repeat = "person in persons | filter: searchBox"> здесь.

Результаты поиска фильтруются на основе модели searchBox.

Пример JsBin

  • 0
    Ой!!! Я понимаю!!
  • 0
    Я не смотрел видео, но в соответствии с кодом, который вы разместили выше: filter: searchBox , но searchBox не существует! Таким образом, вы должны привязать searchBox к входу или sth, чтобы фильтр работал!
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню