Как отфильтровать список только по имени - AngularJS

Question

Так что мне нужно реализовать поисковый фильтр, просто по имени.Я не очень хорошо с angularjs, поэтому я мог бы использовать некоторую помощь.Это то, что я сделал сейчас, но для этого нужно немного доработать:

<input type="text" ng-model="searchText" placeholder="Search for a pupil..." />

<tr ng-repeat="student in studentData | filter : searchText">

только этот фильтр.Но в studentData я должен искать только через studentData.FullName.Какой самый простой способ сделать это?

Answer 1

Полагаю, вы можете указать свойство, которое хотите отфильтровать, следующим образом:

<tr ng-repeat="student in studentData | filter : {fullName: searchText}">

Однако имейте в виду, что это будет точное совпадение текста, в том числе регистр "Джо" не равен"Джо".

Выше будет работать, но IMO это не лучшее решение.Ниже моя рекомендация

Измените HTML, чтобы он указывал на новый массив данных:

<input type="text" ng-model="searchText" placeholder="Search for a pupil..." />
<tr ng-repeat="student in filteredStudentData">

И в вашем контроллере:

$scope.searchText = ''; //start as an empty string
$scope.studentData = [ ... ]; //your real data goes in here
$scope.filteredStudentData = []; // start as an empty array

//Watch the `searchText` property for changes
$scope.$watch('searchText ', function(newValue, oldValue){
  //remove whitespace, and make it all lowercase - note the `.trim()` only works on IE 9+
  var normalizedSearchText = (newValue || '').toLowerCase().trim();

  //Now only include the relevant results in the `filteredStudentData` array
  //note that the `.filter()` method is only available on IE9+
  $scope.filteredStudentData = $scope.studentData.filter(function (student) {
    return 
       normalizedSearchText === student.fullName.toLowerCase().trim() ||
       normalizedSearchText === student.someOtherProperty.toLowerCase().trim() ||
       normalizedSearchText === student.anotherExampleProperty.toLowerCase().trim();
  });
});

Answer 2

Попробуйте это

<input type="text" ng-model="searchText" placeholder="Search for a pupil..." />

<tr ng-repeat="student in studentData | filter:{student.Fullname:searchText}">

Answer 3

Проверьте следующий код ..

<input type="text" ng-model="searchText" placeholder="Search for a pupil..." />

<tr ng-repeat="student in studentData | filter :{name:searchText}:true">