javascript - 在 Angular 中输入字段时过滤 ng-repeat 结果

Question

问题

我希望做到这一点，以便当有人在搜索输入字段中输入内容时，通过 Angular 的 ng-repeat 指令呈现的结果会根据他们的查询进行过滤。在较小的规模上，我已经看到它在这个 example 中起作用。在 Angular 文档中，但我无法让它在我自己的代码中工作。

目前我正在使用Foundation for Apps.

这是我的 Github 存储库的链接: https://github.com/onlyandrewn/angular

client/templates/home.html(输入[type="search"] 和 ng-controller)

---
name: home
url: /
---

<header>
    <p class="sponsored">Sponsored by </p>
    <img src="http://placehold.it/200x30" class="sponsors" alt="">
    <h1>Business Directory</h1>
    <div class="find" ng-controller="MainCtrl">
        <label for="looking">
            <i class="fa fa-search"></i>
        </label>
        <input type="search" placeholder="What are you looking for?" ng-model="query">
        <input type="submit">

    </div><!-- /.find -->
    <ul>
        <li class="popular">Popular searches:</li>
        <li>tk-category <span>|</li>
        <li>tk-category <span>|</span></li>
        <li>tk-category <span>|</span></li>
        <li>tk-category <span>|</span></li>
        <li>tk-category </li>
    </ul>
</header>

<div class="businesses">
    <p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
    <div class="options">
        <div class="cat">
            <div class="categories">
                <div class="group">
                    <p class="name">Grade Level</p>
                    <div class="check">
                        <input type="radio" name=""><p>Auto</p>
                        <input type="checkbox" name=""><p>Restaurant</p>
                        <input type="checkbox" name=""><p>Other</p>
                    </div><!-- /.check -->
                </div><!-- /.group -->

                <div class="group">
                    <p class="name">School Type</p>
                    <div class="check">
                        <input type="checkbox">
                        <input type="checkbox">
                        <input type="checkbox">
                        <input type="checkbox">
                        <input type="checkbox">
                    </div><!-- /.check -->
                </div><!-- /.group -->
            </div><!-- /.categories -->
        </div><!-- /.cat -->
    </div><!-- /.options -->
</div><!-- /.businesses -->

<div class="all" ng-controller="MainCtrl">
    <div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query" >
        <div class="overlay">
            <img src="http://placehold.it/300x300" class="storefront" alt="">
        </div><!-- /.overlay -->
        <div class="info">
            <p class="name">{{business.name}}</p>
            <p class="description">{{business.description}}</p>
            <p class="address">{{business.address}}</p>
            <a href="" class="website">{{business.website}}</a>
        </div><!-- /.info -->
    </div>
</div>

<footer>
    <p>Back to top</p>
</footer>

<!-- <div class="buttons">
    <button class="alp">Alphabetically</button>
    <button class="exp">Expanded</button>
    <button class="con">Condensed</button>
</div> -->

<!-- <div class="grid-container"> -->
<!-- </div> -->

scripts.js(ng-repeat 的数据来自哪里)

myApp.controller('MainCtrl', function($scope) {
  $scope.businesses = [
  {
   id: 0,
   name: "Andrew Nguyen",
   description: "I'm a web developer",
   address: "322 11th Street, Brandon, MB",
   website: "http://andrewnguyen.ca"
 },
 {
   id: 1,
   name: "Mary Yacoubian",
   description: "I'm a dental hygenist",
   address: "18 Wishford Drive",
   website: "http://quitecontrary.com"
 },
 {
   id: 2,
   name: "John Axon",
   description: "I'm a jack of all trades",
   address: "1101 Mississauga Rd.",
   website: "http://johnaxon.com"
 },
 {
   id: 3,
   name: "John Axon",
   description: "I'm a jack of all trades",
   address: "1101 Mississauga Rd.",
   website: "http://johnaxon.com"
 }]
});

app.js

'use strict';

  var myApp = angular.module('application', [
    'ui.router',
    'ngAnimate',

    //foundation
    'foundation',
    'foundation.dynamicRouting',
    'foundation.dynamicRouting.animations'
  ])
    .config(config)
    .run(run)
  ;

  config.$inject = ['$urlRouterProvider', '$locationProvider'];

  function config($urlProvider, $locationProvider) {
    $urlProvider.otherwise('/');

    $locationProvider.html5Mode({
      enabled:false,
      requireBase: false
    });

    $locationProvider.hashPrefix('!');
  }

  function run() {
    FastClick.attach(document.body);
  }

Answer 1

由于每个 controller 都是 MainCtrl 的新实例，因此 ng-model="query" 必须位于同一 Controller 下 MainCtrl.

<div ng-controller="MainCtrl">
    <header>
        <p class="sponsored">Sponsored by </p>
        <img src="http://placehold.it/200x30" class="sponsors" alt="">
        <h1>Business Directory</h1>
        <div class="find">
            <label for="looking">
                <i class="fa fa-search"></i>
            </label>
            <input type="search" placeholder="What are you looking for?" ng-model="query">
            <input type="submit">

        </div><!-- /.find -->
        <ul>
            <li class="popular">Popular searches:</li>
            <li>tk-category <span>|</li>
            <li>tk-category <span>|</span></li>
            <li>tk-category <span>|</span></li>
            <li>tk-category <span>|</span></li>
            <li>tk-category </li>
        </ul>
    </header>

    <div class="businesses">
        <p class="number">tk-number of businesses</p><button class="filter button">Filter by <i class="fa fa-chevron-down"></i></button>
        <div class="options">
            <div class="cat">
                <div class="categories">
                    <div class="group">
                        <p class="name">Grade Level</p>
                        <div class="check">
                            <input type="radio" name=""><p>Auto</p>
                            <input type="checkbox" name=""><p>Restaurant</p>
                            <input type="checkbox" name=""><p>Other</p>
                        </div><!-- /.check -->
                    </div><!-- /.group -->

                    <div class="group">
                        <p class="name">School Type</p>
                        <div class="check">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                            <input type="checkbox">
                        </div><!-- /.check -->
                    </div><!-- /.group -->
                </div><!-- /.categories -->
            </div><!-- /.cat -->
        </div><!-- /.options -->
    </div><!-- /.businesses -->

    <div class="all">
        <div class="business large-4.columns" data-ng-repeat="business in businesses | filter:query" >
            <div class="overlay">
                <img src="http://placehold.it/300x300" class="storefront" alt="">
            </div><!-- /.overlay -->
            <div class="info">
                <p class="name">{{business.name}}</p>
                <p class="description">{{business.description}}</p>
                <p class="address">{{business.address}}</p>
                <a href="" class="website">{{business.website}}</a>
            </div><!-- /.info -->
        </div>
    </div>

    <footer>
        <p>Back to top</p>
    </footer>

    <!-- <div class="buttons">
        <button class="alp">Alphabetically</button>
        <button class="exp">Expanded</button>
        <button class="con">Condensed</button>
    </div> -->

    <!-- <div class="grid-container"> -->
    <!-- </div> -->
</div>