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

Popular posts from this blog

php - failed to open stream: HTTP request failed! HTTP/1.0 400 Bad Request -

java - How to filter a backspace keyboard input -

java - Show Soft Keyboard when EditText Appears -