JSFiddle - React, Tailwind, and code Playground

by Sunny SM

HTML

<h2>FILTER SECTION WITH APPLICATION</h2>
 <div ng-app="sunApp" ng-controller="empInfo">
     <table border="0">
         <tr><td>First Name :</td><td><input type="text" ng-model="emp.firstName"</td></tr>
         <tr><td>Last Name :</td><td><input type="text" ng-model="emp.lastName"</td></tr>
         <tr><td>salary :</td><td><input type="text" ng-model="emp.salary"</td></tr>
     </table>
     <p>Name in upper case : {{emp.fullName()|uppercase}}</p><p>Name in Lower case : {{emp.fullName()|lowercase}}</p><p>Salary in currency: {{emp.salary}}</p>
     <p>
         <table border="0">
         <tr><td>Search by Name OR salary</td><td><input type="text" ng-model="name"</td></tr>
         <tr><td>
               <ul>
                 <li ng-repeat = "item in emp.info | filter: name |orderBy:'salary'">
                   {{ item.name + ', salary:' + item.salary }}
                 </li>
               </ul>
         </td></tr>
     </table>
     </p>
 </div>

JavaScript

var mainObj= angular.module("sunApp",[]);
mainObj.controller('empInfo',function($scope){
	$scope.emp={
  							firstName:'Sunny',
    						lastName:'Attwal',
                salary:52500,
  						  info:[	
                      {name:'Sunny Attwal',salary:50500},
               				{name:'Rinki Saini',salary:25600},
                      {name:'Reena',salary:20500},
                      {name:'Isha Mahajan',salary:119850}
                   ],
                fullName:function(){
               		var curObj;
                  curObj= $scope.emp;
                  return curObj.firstName+" "+curObj.lastName;
                }
       };
});