2015-11-03 2 views
0

Вот мой код Javascript Как я могу реализовать фильтр поиска на основе этих входов? В настоящее время я новичок в angularjs.Фильтр Angularjs основан на http get

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> 

ответ

1

Чтобы дать вам полный реализован фильтр, что нужно знать о данных атрибутов у вас есть. Я внедрил фильтр sample plunker на основе http get.you можно фильтровать по имени.

Моя 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> 

+0

Привет это мои данные атрибуты http://plnkr.co/edit/iO3yERm8VW7HvhCYI0CU –

+0

я хорошо реализован в виде списка, чтобы показать результат. вы можете изменить вид таблицы в своем. Я думаю, что это не проблема. –

+1

СПАСИБО АРЯН ВАШ ГЕРОУ^_^Я РЕШЕН СЕЙЧАС УДИВИТЕЛЬНО –