Search by filter: in Angular.js,

Friday, October 25, 2013

Hi i am new to Angular.js and i am learning it through the tutorials present in Angular.js site,

this is the code which i tried, it is as follows

<!DOCTYPE html>  <html ng-app="SmartPhoneApp">  <head>      <title>Smart phone Angular</title>            <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>      <script type="text/javascript">          var smartPhoneApp = angular.module("SmartPhoneApp",[]);            smartPhoneApp.controller("phoneCtrl",function($scope){              $scope.phones = [                  {                      "modelName" : "LUMIA 520",                      "companyName" : "NOKIA"                  },                  {                      "modelName" : "GALAXY S Series",                      "companyName" : "SAMSUNG"                  },                  {                      "modelName" : "CANVAS",                      "companyName" : "MICROMAX"                  },                  {                      "modelName" : "OPTIMUS",                      "companyName" : "LG"                                          }              ];            });      </script>     </head>  <body>        Search by Model Name : <input ng-model="comp.modelName" />        Search by Company : <input ng-model="comp.companyName" />         <div ng-controller="phoneCtrl">          <table ng-repeat="phone in phones | filter: comp">              <tr>                  <td>{{phone.modelName}}</td>                  <td>{{phone.companyName}}</td>              </tr>          </table>      </div>  </body>  </html>
in the above code you can see i am able to search the mobile phone details using two input, 
by modelName or by company name.
Now i am trying the same search by with different approach, 
what if i want to search the data using the filter present in the 
select box the code is as follows,
<!DOCTYPE html>  <html ng-app="EmployeeApp">  <head>      <title>Orderring People</title>           <script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>      <script type="text/javascript">          var employeeApp = angular.module("EmployeeApp",[]);          employeeApp.controller("empCtrl",function($scope){              $scope.employees = [                  {                      "name" : "Mahesh Pachangane",                      "company" : "Syntel India Pvt. Ltd",                      "designation" : "Associate"                  },                  {                      "name" : "Brijesh Shah",                      "company" : "Britanica Software Ltd.",                      "designation" : "Software Engineer"                  },                  {                      "name" : "Amit Mayekar",                      "company" : "Apex Solutions",                      "designation" : "Human Resource"                  },                  {                      "name" : "Ninad Parte",                      "company" : "Man-made Solutions",                      "designation" : "Senior Architect"                  },                  {                      "name" : "Sunil Shrivastava",                      "company" : "IBM",                      "designation" : "Project Lead"                  },                  {                      "name" : "Pranav Shastri",                      "company" : "TCS",                      "designation" : "Senior Software Engineer"                  },                  {                      "name" : "Madan Naidu",                      "company" : "KPMG",                      "designation" : "Senior Associate"                  },                  {                      "name" : "Amit Gangurde",                      "company" : "Amazon",                      "designation" : "Programe Manager"                  }                 ];              $scope.orderProp="name";                          });      </script>     </head>  <body ng-controller="empCtrl">            <table>          <tr>              <td align="right">Search :</td>              <td><input ng-model="query" /></td>          </tr>                     <tr>              <td align="right">Search By :</td>              <td>                  <select ng-model="query">                      <option value="name">NAME</option>                      <option value="company">COMPANY</option>                      <option value="designation">DESIGNATION</option>                  </select>                 </td>          </tr>      </table>      <hr>      <div>          <table>              <tr>                  <th>Employee Name</th>                  <th>Company Name</th>                  <th>Designation</th>              </tr>              <tr ng-repeat="emp in employees | filter:query">                  <td>{{}}</td>                  <td>{{}}</td>                  <td>{{emp.designation}}</td>              </tr>          </table>      </div>  </body>

here in the above code you can see i want to search the employee using the search by
option selected in the select box, but this example don't work, the 'query' does'nt take the
required input 
can you please help me out in this,

You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to
For more options, visit


Post a Comment

Note: Only a member of this blog may post a comment.

Copyright © 2010 Web Design | Free Blogger Templates by Splashy Templates | Layout by Atomic Website Templates

Vida de bombeiro Recipes Informatica Humor Jokes Mensagens Curiosity Saude Video Games Animals Diario das Mensagens Eletronica Rei Jesus News Noticias da TV Artesanato Esportes Noticias Atuais Games Pets Career Religion Recreation Business Education Autos Academics Style Television Programming Motosport Humor News The Games Home Downs World News Internet Design Entertaimment Celebrities 1001 Games Doctor Pets Net Downs World Enter Jesus Mensagensr Android Rub Letras Dialogue cosmetics Genexus lasofia thebushrajr wingshock tripedes gorduravegetal dainfamia dejavu-transpersonal jsbenfica republicadasbadanas ruiherbon iranianforaryans eaystcheyl fotosdanadir Só Humor Curiosity Gifs Medical Female American Health Madeira Designer PPS Divertidas Estate Travel Estate Writing Computer Matilde Ocultos Matilde futebolcomnoticias girassol lettheworldturn topdigitalnet Bem amado enjohnny produceideas foodasticos cronicasdoimaginario downloadsdegraca compactandoletras newcuriosidades blogdoarmario arrozinhoii