I am new to AngularJS and am trying to rewrite my webpage in the "angular way" instead of using jquery but I am running into some problems with my understanding.
I have my HTML like so:
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="locations()"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks"><a ng-init="content=headerLink.text" href="#{{content}}">{{content}}</a></li>
</ul>
</nav>
</header>
Then my controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
}]);
So basically, on hover, I want the <li> content to change. I know the hover event is being fired, and correctly so. The error I get is that ReferenceError: headerLinks is not defined which is odd to me because it is in the controller itself, so I tried content = $scope.headerLinks.alternativeText; and that stopped the error but I guess content in the controller is not the same as content in ng-init.
What is the right way to do this? Perhaps I am thinking of this the wrong way.
For your case better a bit simplify your code like, for example use ng-if and flag isOver
angular.module('app',[])
.controller('MainController',function($scope){
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
<a ng-if="!isOver" href="#{{headerLink.text}}">{{headerLink.text}}</a>
<a ng-if="isOver" href="#{{headerLink.alternativeText}}">{{headerLink.alternativeText}}</a>
</li>
</ul>
</nav>
</header>
also you can you ternary operator instead ng-if like this
angular.module('app',[])
.controller('MainController',function($scope){
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="isOver=true" ng-mouseout="isOver=false"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
{{!isOver ? headerLink.text : headerLink.alternativeText}}
</li>
</ul>
</nav>
</header>
or even without condition like
angular.module('app', [])
.controller('MainController', function($scope) {
$scope.currentText = 'text';
$scope.headerLinks = [{
text: 'Intro',
alternativeText: 'Arlington'
}, {
text: 'Wholesale',
alternativeText: 'New York'
}];
$scope.locations = function() {
content = headerLinks.alternativeText;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Header -->
<header ng-app="app" ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="currentText='alternativeText'" ng-mouseout="currentText='text'" style="color:black;text-decoration:initial;" id="logoii" href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">
{{headerLink[currentText]}}
</li>
</ul>
</nav>
</header>
Related
I'm newbie to Angular js..But try to make an image slider in my file..
And also I'm using route..Acutally I'm having three pages..
1.home
2.about
3.contact
For this I create an index file in which I add header and footer
While I'm adding the slider in my index page it works fine for me..
But if I did the same thing in my home page..It won't work and I din't find any errors in my console also..
I don't know how to fix it..
Here I attach my all codes..
script.js
// create the module and name it scotchApp
var scotchApp = angular.module('scotchApp', ['ngRoute','ngAnimate', 'ngTouch']);
// configure our routes
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'homeController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
//Logo
$scope.logo = 'logo.png';
//username
$scope.username = 'Jonathan Stephanopalus';
//footercontent
$scope.footer = [
{ title: 'Contacts' },
{ title: 'Feedback' },
{ title: 'Help' },
{ title: 'Site Map' },
{ title: 'Terms & Conditions' },
{ title: 'Privacy Statement' },
{ title: 'Cookie Policy' },
{ title: 'Trademarks' }
];
});
scotchApp.controller('homeController', function($scope) {
// create a message to display in our view
$scope.message = "Lorem Ipsum ";
//lastdiv
$scope.lastdiv = { image : "women_wright.png" ,title:"Get to know Cisco better: Community Forums"};
//slider
$scope.slides = [
{image: 'images/img00.jpg', description: 'Image 00'},
{image: 'images/img01.jpg', description: 'Image 01'},
{image: 'images/img02.jpg', description: 'Image 02'},
{image: 'images/img03.jpg', description: 'Image 03'},
{image: 'images/img04.jpg', description: 'Image 04'}
];
$scope.direction = 'left';
$scope.currentIndex = 0;
$scope.setCurrentSlideIndex = function (index) {
$scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
$scope.currentIndex = index;
};
$scope.isCurrentSlideIndex = function (index) {
return $scope.currentIndex === index;
};
$scope.prevSlide = function () {
$scope.direction = 'left';
$scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
};
$scope.nextSlide = function () {
$scope.direction = 'right';
$scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
};
});
scotchApp.animation('.slide-animation', function () {
return {
beforeAddClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
var finishPoint = element.parent().width();
if(scope.direction !== 'right') {
finishPoint = -finishPoint;
}
TweenMax.to(element, 0.5, {left: finishPoint, onComplete: done });
}
else {
done();
}
},
removeClass: function (element, className, done) {
var scope = element.scope();
if (className == 'ng-hide') {
element.removeClass('ng-hide');
var startPoint = element.parent().width();
if(scope.direction === 'right') {
startPoint = -startPoint;
}
TweenMax.fromTo(element, 0.5, { left: startPoint }, {left: 0, onComplete: done });
}
else {
done();
}
}
};
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
</div>
index.html
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<!-- SCROLLS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<!-- <link rel="stylesheet" href="styles/main.css" /> -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link rel="stylesheet" href="css/styles.css">
<!-- <script src="js/app.js"></script> -->
<!-- SPELLS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.10.3/TweenMax.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body class="angular_class" ng-controller="mainController">
<nav class="navbar navbar-default">
<div class="container">
<div class="menu_1">
<div class="navbar-header">
<a class="navbar-brand" href="/"><img src="image/{{logo}}"></a>
</div>
<div class="f_right">
<p>Welcome, {{ username }}</p>
<img src="image/sml_logo.png">
</div>
</div>
<div class="menu_1">
<ul class="nav navbar-nav navbar-left">
<li ng-repeat="teams in teamArray">{{ teams.team_name }}</li>
</ul>
<div class="f_right">
<input type="text" class="searchbox" placeholder="Search"></input>
</div>
</div>
</div>
</nav>
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
<footer class="text-center">
<div class="footer_block">
<span ng-repeat="ft in footer">{{ ft.title }}</span>
</div>
</footer>
</body>
</html>
And for information I follow this link
Could someone please help me out of this..
Thank you,
Change home.html
<div ng-controller="homeController">
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
with
<div class="container slider">
<img ng-repeat="slide in slides" class="slide slide-animation nonDraggableImage" ng-swipe-right="nextSlide()" ng-swipe-left="prevSlide()" ng-hide="!isCurrentSlideIndex($index)" ng-src="{{slide.image}}">
<a class="arrow prev" href="#" ng-click="nextSlide()"></a>
<a class="arrow next" href="#" ng-click="prevSlide()"></a>
<nav class="nav">
<div class="wrapper">
<ul class="dots">
<li class="dot" ng-repeat="slide in slides">
{{slide.description}}
</li>
</ul>
</div>
</nav>
test
</div>
I've put this code in Html head section:
<script src="lib/smart-menus/jquery.smartmenus.min.js"></script>
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link href="lib/smart-menus/sm-core-css.css" rel="stylesheet" />
<link href="lib/smart-menus/sm-blue.css" rel="stylesheet" />
and in body:
<nav id="main-nav" role="navigation">
<div id="main-menu" class="sm sm-rtl sm-blue">
<ul>
<li><a ui-sref="site.home">Home</a></li>
<li ng-repeat="menu in menus">
<a href='#'>{{menu.Title}}</a>
<ul ng-show="getHasSubMenus(menu)">
<li ng-repeat="subMenu in menu.SubMenus">
<a ui-sref="site.shopbycategory({ departmentID: subMenu.DepartmentID , categoryID: subMenu.CategoryID, searchTerm: '' })">
{{subMenu.Title}}
</a>
</li>
</ul>
</li>
<li><a ui-sref="site.contact">Contacts</a></li>
</ul>
</div>
</nav>
in the page controller I have:
function siteController($scope, $location, $rootScope, Account, $state, $stateParams, Site, $timeout) {
$timeout(function () {
$scope.getMenus(function () { // OnSuccess
$('#main-menu').smartmenus('refresh');
});
}, 1);}
Also I included jQuery 1.12 before other scripts. and I can verify that angularjs has added all the menus to the main-menu div using F12 in IE, But nothing appears in the page and I don't get any errors from these codes. Is my code correct?
I changed:
<div id="main-menu" class="sm sm-rtl sm-blue">
<ul>
to:
<ul id="main-menu" class="sm sm-rtl sm-blue">
now top level links work and submenus despite existence not showing.
I was using this example to build the login page
angular-authentication-example
Once login to this app the home screen should have multi-tab view as mentioned in the below example
plunker
<ul class="nav nav-tabs" ng-controller="TabsCtrl">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab">{{tab.label}}</li>
</ul>
The issue I am facing is the multi-tab is not embedded as Single page App. As mentioned in the demo it should embed in the same view but once I integrated, it is showing as different view. For example, when I click jobs it is taking to new html page but not included in the same view as in the plunker demo .I want to use the angularjs route provider instead of state provider and the reason is login authentication example is best and I don't want to change the entire logic.
Update
Version 1 (Without routing) Plunker Demo
It will redirect to a new view if you use #/jobs syntax. Here is a complete working solution without routes:
Your code on plunker is working because you didn't include ngRoute in your code.
View in plunker demo
app.js
$scope.tabs = [
{ id : 'jobs', label : 'Jobs', templateUrl:'jobs-partial.html' },
{ id : 'invoices', label : 'Invoices',templateUrl: 'invoices-partial.html' },
{ id : 'payments', label : 'Payments',templateUrl: 'payments-partial.html' }
];
$scope.activeTab = $scope.tabs[0];
$scope.changeActiveTab = function (tab) {
$scope.activeTab = tab;
};
$scope.isActiveTab = function (tabId) {
return tabId === $scope.activeTab;
}
Inside index.html
<body ng-controller="TabsCtrl">
<ul class="nav nav-tabs" >
<li ng-class="{active: isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade" ng-class="{'in active': isActiveTab(tab.id)}" ng-repeat="tab in tabs"
ng-include="tab.templateUrl">
</div>
</div>
</body>
Version 2 (With routing) Plunker Demo
index.html
<!DOCTYPE html>
<html ng-app="plunkerApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
app.js
angular
.module('untitled4App', [
'ngRoute'
])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when('/jobs', {
templateUrl: '/views/jobs-partial.html',
controller: 'JobsCtrl'
}).when('/invoices', {
templateUrl: '/views/invoices-partial.html',
controller: 'InvoicesCtrl'
}).when('/payments', {
templateUrl: '/views/payments-partial.html',
controller: 'PaymentsCtrl'
});
// make this demo work in plunker
$locationProvider.html5Mode(false);
}])
.factory('tabsService', function () {
return {
tabs: function () {
return [
{id: 'jobs', label: 'Jobs'},
{id: 'invoices', label: 'Invoices'},
{id: 'payments', label: 'Payments'}
]
},
activeTab: '',
isActiveTab: function (tabId) {
return tabId === this.activeTab;
}
}
})
.controller('JobsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[0].id;
}])
.controller('InvoicesCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[1].id;
}])
.controller('PaymentsCtrl', ['$scope', 'tabsService', function ($scope, tabsService) {
$scope.tabs = tabsService.tabs();
$scope.tabsService = tabsService;
tabsService.activeTab = $scope.tabs[2].id;
}]);
jobs.partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Jobs
</div>
</div>
invoices-partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Invoices
</div>
</div>
payments-partial.html
<ul class="nav nav-tabs">
<li ng-class="{active: tabsService.isActiveTab(tab.id)}" ng-repeat="tab in tabs">
{{tab.label}}
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active">
Payments
</div>
</div>
I am having trouble with Angular, this is my first time using it after taking the lessons in CodeAcademy. My code is as follows:
HTML:
<body style="padding-top: 0px;" data-spy="scroll" ng-app="SummerMill">
<section id="intro" class="main style1 dark">
<!-- Header -->
<header ng-controller="MainController" id="header">
<!-- Logo -->
<h1 id="logo">Summer Mill</h1>
<a ng-mouseover="locations()"
style="color:black;text-decoration:initial;"
id="logoii"
href="http://localhost/locations">Locations</a>
<!-- Nav -->
<nav id="nav">
<ul class="nav navbar-nav">
<li ng-repeat="headerLink in headerLinks">{{headerLink.text}}</li>
</ul>
</nav>
</header>
App.js
var app = angular.module('SummerMill', []);
MainController.js
app.controller('MainController', ['$scope', function($scope) {
$scope.headerLinks = [
{
text: 'Intro',
alternativeText: 'Arlington'
},
{
text: 'Wholesale',
alternativeText: 'New York'
}
];
}]);
The header just gives me {{headerLink.text}}
Why? :'(
Edit: It turned out that I had an error in an earlier script injected before angular that was causing the problem. Simply rearranging the order of the <script src=""></script> tags solved it for me.
So instead of this:
<script src="javascript/init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
I did this:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="javascript/init.js"></script>
It turns out the problem was that I had an error in an earlier script that was loading in the header, with angular originally being injected after this errant script.
Once I put angular first, everything was fine.
:)
Im trying to filter items in a table based on checked values but I am only able to filter one of the values at a time. What should I do to filter all the checked values?
This is the JavaScript:
App = Ember.Application.create();
App.Router.map(function() {
this.resource('employees', function(){});
});
App.EmployeesRoute = Ember.Route.extend({
model: function(){
return App.EMPLOYEES;
}
});
App.EmployeesController = Ember.ArrayController.extend({
inFinance: false,
inMarketing: false,
filtered: function(){
var inFinance = this.get('inFinance');
var inMarketing = this.get('inMarketing');
var model = this.get('model');
var newModel = model;
if(inFinance){
newModel = model.filterBy('department', 'Finance');
}
if(inMarketing){
newModel = model.filterBy('department', 'Marketing');
}
return newModel;
}.property('inFinance', 'inMarketing')
});
App.EMPLOYEES=[
{
name: 'Ricky',
department: 'Finance'
},
{
name:'George',
department:'Marketing'
},
{
name:'Jonah',
department: 'Finance'
}
];
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js"></script>
<script src="http://builds.emberjs.com/tags/v1.9.1/ember.js"></script>
</head>
<body>
<script type="text/x-handlebars">
<nav class="navbar navbar-default navbar-fixed-top" sytle='padding:'>
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
{{#link-to 'index' tagName='a' classNames='navbar-brand'}}Test{{/link-to}}
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>{{#link-to 'employees' tagName='a'}}Employees{{/link-to}}</li></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
{{outlet}}
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" sytle='padding:'>
Created by the almighty burrito. EmberJs Testing 2015
</nav>
</script>
<script type="text/x-handlebars" data-template-name="index">
<h1 style='padding:30px'>{{#link-to 'employees' tagName='a'}}Click for Employees{{/link-to}}</h3>
</script>
<script type="text/x-handlebars" data-template-name="employees">
<h3 style='padding:15px'> Filter</h3>
{{input type='checkbox' checked=inFinance}} Finance
{{input type='checkbox' checked=inMarketing}} Marketing
<h2 class="sub-header" >Employees</h2>
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>name</th>
<th>department</th>
</tr>
<tbody>
{{#each employee in filtered}}
<tr>
<td>{{employee.name}}</td>
<td>{{employee.department}}</td>
{{/each}}
</thead>
</script>
</body>
</html>
Thanks in advance! Here is the jsBin Here
Here’s one way to filter based on an attribute matching multiple values. I added an accounting department for more variety.
var newModel = model;
var matchAgainst = [];
if(inFinance){
matchAgainst.push('Finance');
}
if(inMarketing){
matchAgainst.push('Marketing');
}
if(inAccounting){
matchAgainst.push('Accounting');
}
if (!Ember.isEmpty(matchAgainst)) {
newModel = newModel.filter(function(person) {
return matchAgainst.indexOf(person.department) != -1;
});
}
JS Bin example