Блог

Главная - Вопросы по программированию - Выполнение точного соответствия с помощью Angular JS

Выполнение точного соответствия с помощью Angular JS

#angularjs

#angularjs

Вопрос:

Я создал таблицу со столбцами: имя, дата, пол и зарплата. Над таблицей есть два текстовых поля поиска. 1) поиск по имени 2) поиск по зарплате. затем я установил флажок, известный как «Точное совпадение». Всякий раз, когда я ввожу любую букву в текстовое поле «поиск по имени», и если эта буква присутствует в столбце name таблицы, страница возвращает эти строки. То же самое происходит с текстовым полем зарплаты. Но после того, как я установил флажок Точное совпадение, он возвращается только в том случае, если точное значение совпадает. Например, если я введу ‘Ben’ в поле поиска имени, и если Ben присутствует в столбце name, то только он вернет эту конкретную строку, иначе нет.

Проблема здесь в том, что точное совпадение букв работает нормально, но когда я использую точное совпадение для столбца зарплаты и набираю любое число, оно не возвращает мне никакого значения. То же самое происходит и с датой. Я не уверен, что нам нужно что-то добавлять в код при работе с числами.

Вот HTML-код : 

 <!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 : 

     /// <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;


});

Ответ №1:

Попробуйте изменить тип ввода на число в поле зарплата . , когда точное совпадение в angular использует строгий компаратор, === вместо == , поэтому при использовании типа текстового поля типы не совпадают.

Комментарии:

1. Большое спасибо. Изменение типа ввода действительно решило проблему.