Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="EmployeeApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <title>Orderring People</title>     
</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="queryBy">
                    <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:queryFilter">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
</body>
 
​
 
var employeeApp = angular.module("EmployeeApp", []);
employeeApp.controller("empCtrl", function($scope) {
  Object.defineProperty($scope, "queryFilter", {
      get: function() {
          var out = {};
          out[$scope.queryBy || "$"] = $scope.query;
          return out;
      }
  });
  $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"
  }];
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers