Блог

Главная - Вопросы по программированию - Поиск объектов массива AngularJS

Поиск объектов массива AngularJS

#angularjs #search

Вопрос:

Поиск

 <thead>
    <th>ID</th><th>Employee</th><th>DoB</th><th>Gender</th>
</thead>
<tbody ng-repeat="employee in Employee | filter:SearchInput">
    <tr ng-controller="TableContent"> 
        <td>{{ employee.ID }}</td><td>{{ employee.FName   " "   employee.LName }}</td><td>{{employee.DoB}}</td><td>{{employee.Gender}}</td>
        <td hidden>{{ $index }}</td>
        <td>    
            <button ng-click="EditSaverCommit()" class="btn btn-success"  data-bs-toggle="modal" data-bs-target="#EditEmployeeModal" type="button">
            Edit {{ employee.ID }}</button>
        </td>
        <td>    
            <button class="btn btn-danger" type="button" ng-click="DeleteEmployeeCommit()">
            Delete {{ employee.ID }}</button>
        </td>
    </tr>
</tbody>

Всем привет, я хотел бы, чтобы мой код выполнял поиск по имени FName всякий раз, когда я пытаюсь выполнить поиск в своем массиве.
Как мне это сделать без поиска/фильтрации всего содержимого сотрудника?

Ответ №1:

Я не уверен, чего ты хочешь, но я думаю, хочешь ли ты этого
Это должно вам помочь

 angular.module('Stack', []).controller('MainCtrl', function ($scope) {
  $scope.Employee = [
    {
      ID: 0,
      FName: 'John',
      LName: 'Doe',
      DoB: '19/05/1999',
      Gender: 'Male',
    },
    {
      ID: 1,
      FName: 'Violet',
      LName: 'Bilodeau',
      DoB: '02/02/1938',
      Gender: 'Female',
    },
    {
      ID: 2,
      FName: 'April',
      LName: 'Jarvis',
      DoB: '25/03/1969',
      Gender: 'Female',
    },
    {
      ID: 3,
      FName: 'Betty',
      LName: 'Mattera',
      DoB: '27/08/1987',
      Gender: 'Female',
    },
    {
      ID: 4,
      FName: 'Thelma',
      LName: 'Delacruz',
      DoB: '13/11/1995',
      Gender: 'Female',
    },
  ];
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>


    <div ng-app="Stack" ng-controller="MainCtrl">
    <!-- ng-model="SearchInput.FName" .FName can be replaced by .ID or .LName -->
    <input type="text" ng-model="SearchInput.FName" placeholder="Search employee"/>
    <br>
    <br>
      <table border="1">
        <thead>
          <th>ID</th>
          <th>Employee</th>
          <th>DoB</th>
          <th>Gender</th>
        </thead>
        <tbody>
          <tr ng-repeat="employee in Employee | filter: SearchInput">
            <td>{{ employee.ID }}</td>
            <td>{{ employee.FName   " "   employee.LName}}</td>
            <td>{{ employee.DoB }}</td>
            <td>{{employee.Gender}}</td>
          </tr>
        </tbody>
      </table>
    </div>
Метки: