Prajjwal Rao Prajjwal Rao - 2 months ago 15
AngularJS Question

Performing Exact Match through Angular JS

I have created a table with columns: name, date, gender and salary. Above the table there are two search text boxes. 1) search by name 2) search by salary. then I have given a check box known as 'Exact Match'.
Whenever I type any letter in the 'search by name' textbox and if that letter is present in the name column of the table then the page returns those rows. Same thing happens with salary text box. But after I check the box Exact Match, it returns only if exact value matches. For Example- if I type 'Ben' in the name search box and if Ben is present in the name column then only it will return that particular row otherwise not.

The problem here is with letters exact match is working fine but when I use exact match for salary column and type any number then it won't return me any value. Same thing happens with date also. I am not sure we need to add something in the code while working with numbers.

Here is HTML Code :

<!doctype html>
<html ng-app="myModule">
<head>
<script src="../angular.min.js"> </script>
<script src="Script12.js"> </script>
</head>
<body>
<div ng-controller="myController">
<input type="text" placeholder="search name" ng-model="searchText.name">
<input type="text" placeholder="search gender" ng-model="searchText.gender">
<input type="text" placeholder="search DOB" ng-model="searchText.dateOfBirth">
<input type="text" placeholder="search Salary" ng-model="searchText.salary">
<input type="checkbox" ng-model="exactMatch">EXACT MATCH

<br><br>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees |filter:searchText:exactMatch ">
<td> {{employee.name}}</td>
<td> {{employee.dateOfBirth | date:"MM/dd/yyyy"}}</td>
<td> {{employee.gender}}</td>
<td> {{employee.salary}}</td>
</tr>


</tbody>
</table>

</div>
</body>

</html>


Java Script file :

/// <reference path="../angular.min.js" />

var myApp = angular.module("myModule",[]);

myApp.controller("myController", function($scope) {

var employees = [
{name: "Ben", dateOfBirth: new Date("November 20, 1989"), gender: "Male", salary:50000 },
{name: "Stifler", dateOfBirth: new Date("July 15, 19002"), gender: "Female", salary:700000 },
{name: "Gordon", dateOfBirth: new Date("April 10, 2006"), gender: "Male", salary:900000000 },
{name: "Ramsay", dateOfBirth: new Date("January 18, 1996"), gender: "Male", salary:87864521 },
{name: "Leon", dateOfBirth: new Date("February 8, 2009"), gender: "Female", salary:213265478 }
];
$scope.employees = employees;


});

Answer

Try to change input type to number on salary field . When exact match is on angular uses strict comparator, === instead of ==, thus when text field type is used the types don't match.