How can I add filer to the page after data load from Web API?

Question

I'm developing hotel booking site. I have completed development on load data from WebAPI. I want to add filters after page load.

Script

function getAll() {
    var sub = {
        Des: $scope.Des,
        DepartureDate: $scope.DepartureDate,
        ReturnDate: $scope.ReturnDate,
        Rooms: $scope.Rooms,
     };

    var getAll = APIService.hotelavailability(sub);
    getAll.then(function (d) {
        console.log("Succss");
        $scope.respData = d.data.hotels;
    }, function (error) {
        console.log('Oops! Something went wrong.');
}

CHTML Code

<div class="hotel_filter">
 <input ng-model="hotelName" class="form-control" placeholder="Search hotel" type="text" id="searchbox">
</div>
<div ng-repeat="hotel in respData.hotels" class="clearfix">  
 <h2>{{hotel.name}}</h2>
</div>

How can i filter hotel data after page load from input box(searchbox)?.

I think you are looking for the answer like this . https://stackoverflow.com/questions/19584992/search-by-filter-in-angular-js — Muhammad Shariq, Jun 22 '17 at 08:06

score 1 · Accepted Answer · answered Jun 22 '17 at 08:06

1

Have a look at this. It is exactly what you describe. https://docs.angularjs.org/api/ng/filter/filter . Examples are shown there, but here you go :

<div class="hotel_filter">
 <input ng-model="hotelName" class="form-control" placeholder="Search hotel" type="text" id="searchbox">
</div>
<div ng-repeat="hotel in respData.hotels | filter:hotelName" class="clearfix">  
 <h2>{{hotel.name}}</h2>
</div>

answered Jun 22 '17 at 08:06

Dinca Adrian

1,190
11
21

thanks. its work . how can i filter particulate fields on hotel object? – sanjeewa Jun 23 '17 at 05:46
the inputs should have the same model defined as the fields you want to search for. also in that documentation there is a search by field only. The bottom of the page – Dinca Adrian Jun 23 '17 at 09:31

How can I add filer to the page after data load from Web API?

1 Answers1