CODEWITHSUNDEEP
javascripthtmlangularjs
DawnZHANG
DawnZHANG

Reputation: 387

Can I change AngularJS's dirpagination filter from input box to select box?

I've been messing with the AngularJS's dirpagination library, please refer to link: https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

see code demo at: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

I'm wondering, can I change the input box to a select box and get the same function. Eg. I'm filtering some names, but the names can only be chosen from the select box and the content will be filtered according to the input from the select box.

I have tried to achieve this by do the following:





function callFilter(Name) {
        document.getElementById("search").value = Name;
}


<span style="float:right;">
        <select style="height: 30px;" onchange="callFilter(this.value);">
    		<option value="All_Names" selected>Names</option>
    	</select>
    	<input ng-model="q" id="search" class="form-control" value="" type="hidden">
    	<input value="10" class="form-control" ng-model="pageSize" type="hidden">
</span>

By doing this, I managed to manipulate the hidden input box, however, the value changed in input box won't take actual action to filer my content. What should I do? Thanks in advance!

Upvotes: 0

Views: 105

Answers (2)

Purushothaman
Purushothaman

Reputation: 358

try this 

$scope.getFilter = function() {
    var filter = {};
    filter[$scope.filter] = $scope.query;
    return filter;
};
<select ng-model="filter">
    <option value='firstname'>by firstname </option>
    <option value='lastname'>by lastname </option>
</select>

<input ng-model='query'>

<ul>
    <li ng-repeat='person in persons | filter: getFilter()'> firstname: {{person.firstname}}, lastname: {{person.lastname}}
</ul>

let me know, is this post useful or not ...

Upvotes: 0

Anil Kumar Ram
Anil Kumar Ram

Reputation: 1221

Check code for dropdown, and demo here

<select ng-model="q" class="form-control">
     <option value='' Selected>Select</option>
     <option value="meal 1">Meal 1</option>
     <option value="meal 2">Meal 2</option>
     <option value="meal 3">Meal 3</option>
</select>

Upvotes: 1

Related Questions