javascript - Getting search field to filter results in Angular, problems Gulp / ng-model -
problem
i have input field want readers able search businesses, have been put onto page using angular's ng-repeat. right now, when type search field, doesn't filter of them.
where problem be
wondering if it's problem gulpfile.js , how it's compiling build folder. other possibilities include incorrect using of directive ng-model or if ng-controller="mainctrl" in wrong place?
currently i'm using foundation apps, include angular views , routing. i've included link github , code samples below.
edit #1:
putting ng-controller="mainctrl" in header not seem work, instead businesses not show when compiled.
github: https://github.com/onlyandrewn/angular
gulpfile.js
// foundation apps template gulpfile // ------------------------------------- // file processes of assets in "client" folder, combines them foundation apps assets, , outputs finished files in "build" folder finished app. // 1. libraries // - - - - - - - - - - - - - - - var $ = require('gulp-load-plugins')(); var argv = require('yargs').argv; var gulp = require('gulp'); var rimraf = require('rimraf'); var router = require('front-router'); var sequence = require('run-sequence'); // check --production flag var isproduction = !!(argv.production); // 2. file paths // - - - - - - - - - - - - - - - var paths = { assets: [ './client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*' ], // sass check these folders files when use @import. sass: [ 'client/assets/scss', 'bower_components/foundation-apps/scss' ], // these files include foundation apps , dependencies foundationjs: [ 'bower_components/fastclick/lib/fastclick.js', 'bower_components/viewport-units-buggyfill/viewport-units-buggyfill.js', 'bower_components/tether/tether.js', 'bower_components/hammerjs/hammer.js', 'bower_components/angular/angular.js', 'bower_components/angular-animate/angular-animate.js', 'bower_components/angular-ui-router/release/angular-ui-router.js', 'bower_components/foundation-apps/js/vendor/**/*.js', 'bower_components/foundation-apps/js/angular/**/*.js', '!bower_components/foundation-apps/js/angular/app.js' ], // these files app's javascript appjs: [ 'client/assets/js/*.js' // 'client/assets/js/app.js' ] } // 3. tasks // - - - - - - - - - - - - - - - // cleans build directory gulp.task('clean', function(cb) { rimraf('./build', cb); }); // copies in client folder except templates, sass, , js gulp.task('copy', function() { return gulp.src(paths.assets, { base: './client/' }) .pipe(gulp.dest('./build')) ; }); // copies app's page templates , generates urls them gulp.task('copy:templates', function() { return gulp.src('./client/templates/**/*.html') .pipe(router({ path: 'build/assets/js/routes.js', root: 'client' })) .pipe(gulp.dest('./build/templates')) ; }); // compiles foundation apps directive partials single javascript file gulp.task('copy:foundation', function(cb) { gulp.src('bower_components/foundation-apps/js/angular/components/**/*.html') .pipe($.nghtml2js({ prefix: 'components/', modulename: 'foundation', declaremodule: false })) .pipe($.uglify()) .pipe($.concat('templates.js')) .pipe(gulp.dest('./build/assets/js')) ; // iconic svg icons gulp.src('./bower_components/foundation-apps/iconic/**/*') .pipe(gulp.dest('./build/assets/img/iconic/')) ; cb(); }); // compiles sass gulp.task('sass', function () { return gulp.src('client/assets/scss/app.scss') .pipe($.sass({ includepaths: paths.sass, outputstyle: (isproduction ? 'compressed' : 'nested'), errlogtoconsole: true })) .pipe($.autoprefixer({ browsers: ['last 2 versions', 'ie 10'] })) .pipe(gulp.dest('./build/assets/css/')) ; }); // compiles , copies foundation apps javascript, app's custom js gulp.task('uglify', ['uglify:foundation', 'uglify:app']) gulp.task('uglify:foundation', function(cb) { var uglify = $.if(isproduction, $.uglify() .on('error', function (e) { console.log(e); })); return gulp.src(paths.foundationjs) .pipe(uglify) .pipe($.concat('foundation.js')) .pipe(gulp.dest('./build/assets/js/')) ; }); gulp.task('uglify:app', function() { var uglify = $.if(isproduction, $.uglify() .on('error', function (e) { console.log(e); })); return gulp.src(paths.appjs) .pipe(uglify) .pipe($.concat('app.js')) .pipe(gulp.dest('./build/assets/js/')) ; }); // starts test server, can view @ http://localhost:8080 gulp.task('server', ['build'], function() { gulp.src('./build') .pipe($.webserver({ port: 8080, host: 'localhost', fallback: 'index.html', livereload: true, open: true })) ; }); // builds entire app once, without starting server gulp.task('build', function(cb) { sequence('clean', ['copy', 'copy:foundation', 'sass', 'uglify'], 'copy:templates', cb); }); // default task: builds app, starts server, , recompiles assets when change gulp.task('default', ['server'], function () { // watch sass gulp.watch(['./client/assets/scss/**/*', './scss/**/*'], ['sass']); // watch javascript gulp.watch(['./client/assets/js/**/*', './js/**/*'], ['uglify:app']); // watch static files gulp.watch(['./client/**/*.*', '!./client/templates/**/*.*', '!./client/assets/{scss,js}/**/*.*'], ['copy']); // watch app templates gulp.watch(['./client/templates/**/*.html'], ['copy:templates']); }); home.html (template containing ng-model / ng-controller)
--- name: home url: / --- <header> <p class="sponsored">sponsored </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 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 <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 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> --> index.html (has tag ng-app="application")
<!doctype html> <html lang="en" ng-app="application"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>brandon sun business directory</title> <link href="/assets/css/app.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=lato:300,400,700' rel='stylesheet' type='text/css'> </head> <body> <div class="grid-frame vertical"> <div class="grid-content shrink" style="padding: 0;"> <div class="primary condense menu-bar"> <div class="logo"> <img src="http://placehold.it/80x45" class="bdnsun" alt=""> <div class="social"> <a href="" class="click"><i class="fa fa-twitter"></i></a> <a href="" class="click"><i class="fa fa-facebook"></i></a> </div><!-- /.social --> </div><!-- /.logo --> </div> </div> <div ui-view class="grid-content"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="/assets/js/foundation.js"></script> <script src="/assets/js/templates.js"></script> <script src="/assets/js/routes.js"></script> <script src="/assets/js/app.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.js"></script> </body> </html> scripts.js
myapp.controller('mainctrl', function($scope) { $scope.businesses = [ { id: 0, name: "andrew nguyen", description: "i'm web developer", address: "322 11th street, brandon, mb", website: "http://andrewnguyen.ca" }, { id: 1, name: "mary yacoubian", description: "i'm dental hygenist", address: "18 wishford drive", website: "http://quitecontrary.com" }, { id: 2, name: "john axon", description: "i'm jack of 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); }
Comments
Post a Comment