AngularJS 数组对象搜索-解网

问：

搜索

<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。如何在不搜索/过滤整个员工内容的情况下执行此操作？

angularjs 搜索

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>

上一个：jQuery 和 DataTable

下一个：ASP.NET WebAPI2 和 AngularJS

AngularJS 数组对象搜索

AngularJS array object search

评论