Question

这是我的Javascript代码如何基于此输入实现搜索过滤器？我现在是angularjs的新手。

var app = angular.module('myApp', ['angularUtils.directives.dirPagination']);
                    app.controller('workShiftController', function($scope, $http) {
                        $http.get("getWorkShiftArchiveJson?workshift_id="+getCookie('shiftId'))
                        .success(function (response) {$scope.workshift_archive = response;

                        });
                    });

这是我的HTML代码

<div ng-app="myApp" ng-controller="workShiftController"> 
    <center><h1 style="font-size:2em;">Workshift Archive History</h1></center>
    <hr>
        <table class="table table-striped" at-table at-paginated at-list="filteredList" at-config="config">
        <thead>
            <tr>
                <th>Work Shift Name</th><th>First Name</th><th>Middle Name</th><th>Last Name</th>
                <th>Hours Per Day</th><th>Start Time</th><th>End Time</th><th>Period From</th><th>Period To</th>
            </tr>
        </thead>
        <tbody>
          <tr  dir-paginate="x in workshift_archive | itemsPerPage: 10 ">
            <td>{{x.workshift_name}}</td>
            <td>{{ x.first_Name }}</td>
            <td>{{ x.middle_Name }}</td>
            <td>{{ x.last_Name }}</td>
            <td>{{ x.hours_per_day }}</td>
            <td>{{ x.start_time }}</td>
            <td>{{ x.end_time }}</td>
            <td>{{ x.period_from }}</td>
            <td>{{ x.period_to }}</td>
          </tr>
        </tbody>  
        </table>
     <dir-pagination-controls></dir-pagination-controls>
    </div>

Answer 1

为了向您提供完整实现的过滤器，我需要了解您拥有的数据属性。我已经实现了基于http get.you的sample plunker过滤器，可以按名字过滤。

我的html实施

 <ul ng-controller="MyController as controller">
  <input type="text" placeholder='enter first name' ng-model="search.first_Name">

<table class="table table-striped" at-table at-paginated at-list="filteredList" at-config="config">
    <thead>
        <tr>
            <th>Work Shift Name</th><th>First Name</th><th>Middle Name</th><th>Last Name</th>
            <th>Hours Per Day</th><th>Start Time</th><th>End Time</th><th>Period From</th><th>Period To</th>
        </tr>
    </thead>
    <tbody>
      <tr  ng-repeat="x in controller.mydata| filter:search">
        <td>{{x.workshift_name}}</td>
        <td>{{ x.first_Name }}</td>
        <td>{{ x.middle_Name }}</td>
        <td>{{ x.last_Name }}</td>
        <td>{{ x.hours_per_day }}</td>
        <td>{{ x.start_time }}</td>
        <td>{{ x.end_time }}</td>
        <td>{{ x.period_from }}</td>
        <td>{{ x.period_to }}</td>
      </tr>
    </tbody>  
    </table>

Angularjs过滤器基于http get

1 个答案: