I created a little filter app in AngularJS and it works so that when I type in a letter it finds everything in the table with that letter in it. For example, if I type an "s" then I get all the names with "s" in it. Why is it that some letters, like the letter "m" do not work at all? Can someone tell me how to change this so that all letters work? Many thanks.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Sort Filter</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app\lib\angular.min.js"></script>
<script src="app\app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="search" />
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | orderBy: 'lastName' | filter: search"{{employee.lastName}}">
<td>{{ employee.firstName}}</td>
<td>{{ employee.lastName}}</td>
<td>{{ employee.gender}}</td>
<td>{{ employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JS
angular.module("myApp", [])
.controller("myController", function ($scope) {
//array of objects
{var employees = [
{firstName: "David", lastName: "Hastings", gender: "Male", salary: 55000},
{firstName: "Sarah", lastName: "Smith", gender: "Female", salary: 56000},
{firstName: "Mark", lastName: "Schydinger", gender: "Male", salary: 45000},
{firstName: "Pam", lastName: "Yerace", gender: "Female", salary: 70000},
{firstName: "Todd", lastName: "Barber", gender: "Male", salary: 50000},
{firstName: "Maria", lastName: "Randall", gender: "Female", salary: 59000},
{firstName: "Amanda", lastName: "Quinn", gender: "Female", salary: 68000},
{firstName: "James", lastName: "Stewart", gender: "Male", salary: 62000},
{firstName: "Rachel", lastName: "Dowd", gender: "Female", salary: 57000},
{firstName: "Keith", lastName: "Cameron", gender: "Male", salary: 56500},
{firstName: "Carol", lastName: "Marshall", gender: "Female", salary: 62000},
{firstName: "Peter", lastName: "Buckland", gender: "Male", salary: 60000},
{firstName: "Diana", lastName: "Murray", gender: "Female", salary: 73000},
{firstName: "Dylan", lastName: "Hamilton", gender: "Male", salary: 61000},
{firstName: "Caroline", lastName: "Clark", gender: "Female", salary: 62000},
{firstName: "Cletus", lastName: "Bones", gender: "Male", salary: 60000},
{firstName: "Judy", lastName: "Charleton", gender: "Female", salary: 64000}
]};
$scope.employees = employees;
});
It is actually working. "m" returns all data because of "Male" and "Female". If you want to filter only by first and last name, you have to create your own custom filter. For example:
https://jsfiddle.net/fa0coq4e/
In the view:
<tr ng-repeat="employee in employees | orderBy: 'lastName' | myFilter: search">
And the filter:
filter('myFilter', function() {
return function(array, search) {
if (search !== undefined && search.length > 0) {
var new_array = [];
for (var i = 0; i < array.length; i++) {
if (array[i].firstName.toLowerCase().indexOf(search.toLowerCase()) > -1
|| array[i].lastName.toLowerCase().indexOf(search.toLowerCase()) > -1)
new_array.push(array[i]);
}
return new_array;
} else {
return array;
}
}});