基於http的Angularjs過濾器得到

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>