CODEWITHSUNDEEP
javascriptangularjs
Andrew Nguyen
Andrew Nguyen

Reputation: 1436

Filtering ng-repeat results, when typing into input field in Angular

Problem

I'm looking to make it so that when someone types into the search input field, the results that the are presented with through Angular's ng-repeat directive is filtered by their query. On a smaller scale, I've seen it work in this example in the Angular docs, but I haven't been able to get it to work in my own code.

Currently I'm using Foundation for Apps.

Here's a link to my Github repo: https://github.com/onlyandrewn/angular

client/templates/home.html (Input[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 (Where the data from ng-repeat is coming from)

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

Upvotes: 0

Views: 881

Answers (1)

W&#233;dney Yuri
W&#233;dney Yuri

Reputation: 1277

As every controller is a new instance of MainCtrl, ng-model="query" must be under the same 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>

Upvotes: 2

Related Questions