搜索过滤器不起作用。角Js

Question

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: 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: 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
    })

Answer 1

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. 添加此内容至关重要，因为此处的ng-model="searchBox"绑定到您的搜索结果： <li ng-repeat = "person in persons | filter: searchBox">这里。

Your search results are filtered based on model searchBox . 您的搜索结果将根据模型searchBox进行过滤。

JsBin example JsBin示例

搜索过滤器不起作用。角Js

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-12-30 14:38:10

搜索过滤器不起作用。 角Js

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-12-30 14:38:10

搜索过滤器不起作用。角Js

解决方案1
1 已采纳 2015-12-30 14:38:10