angularjs - How can I show filtered results based on button click? -
i have array created .csv file show of on initial page load, after button click, display results of name of building user clicks on.
here html code:
<div class="row" data-ng-controller="stafflistctrl"> <div class="small-12 columns" > <h1 class="">the public schools of petoskey staff</h1> <header ng-include="'pages/header.html'"></header> <div class="row"> <div class="small-2 columns"><h4>building</h4></div> <div class="small-3 columns"><h4>name</h4></div> <div class="small-2 columns"><h4>phone</h4></div> <div class="small-4 columns"><h4>email</h4></div> </div> <div class="row" id="centralbuilding" data-ng-model="buildingname.central" ng-repeat="person in staff"> <div class="small-2 columns">{{ person.getbuilding() }}</div> <div class="small-3 columns">{{ person.getfirstname() }} {{ person.getlastname() }}</div> <div class="small-2 columns">{{ person.getphone() }}</div> <div class="small-4 columns">{{ person.getemail() }}</div> </div> </div> <footer ng-include="'pages/footer.html'"></footer> </div>
here header.html code:
<div class="row"> <button class="round" id="building1">building1</button> <button class="round" id="building2">building2</button> <button class="round" id="building3">building3</button> </div>
here angularjs code:
app.js:
(function () { "use strict"; angular.module('staffapp', []); })();
controller.js:
(function() { "use strict"; angular.module('staffapp') .controller('stafflistctrl', liststaff); function liststaff($scope) { $scope.filters = {}; $scope.staff = setstaffdata(); } })();
if person object
var person = { building: "", firstname: "", lastname: "", phone:"", email: "" }
html
<div class="row" id="centralbuilding" data-ng-model="buildingname.central" ng-repeat="person in staff | filter : {building = filterbuilding}"> <div class="small-2 columns">{{ person.getbuilding() }}</div> <div class="small-3 columns">{{ person.getfirstname() }} {{ person.getlastname() }}</div> <div class="small-2 columns">{{ person.getphone() }}</div> <div class="small-4 columns">{{ person.getemail() }}</div> </div> <div class="row"> <button class="round" id="building1" ng-click="filterbybuilding('building1')>building1</button> <button class="round" id="building2" filterbybuilding('building2'>building2</button> <button class="round" id="building3" filterbybuilding('building3'>building3</button> </div>
controller
function filterbybuilding(building){ $scope.filterbuilding = building; }
Comments
Post a Comment