How to Use DropDown Selected Vaue as Parameter for Filter in AngularJs?

Question

Iam Using Select2 Drop down which is not Filter on Select :-

My Code :-

<div class="form-group">
                                    <script type="text/javascript">
                                            jQuery(document).ready(function($)
                                            {
                                                $("#select-res").select2();
                                        </script>
                                    <select class="form-control select" ng-model="displayName"  id="select-res">
                                        <option data-ng-repeat="objin objs" value="{{obj.displayName}}">{{obj.displayName}}</option>
                                    </select>
                                    <script>
                                        $('#select-res').select2().on('change', function(e) {
                                          var selectedval= $(this).val();
                                           alert(selectedval);
                                           // $("#filterselected").html(selectedval);
                                           // $("#filterselected").val(selectedval+' ');
                                            document.getElementById("filterselected").value = selectedval;
                                        });
                                    </script>
                                      <input id="filterselected" type="text" ng-model="displayName" />
                                </div>

I used data-ng-model="displayName" for Two Way Binding

Filter Code :-

<div data-ng-repeat="obj in objs | filter:displayname" >
       Results ....
</div>

The Options i Selected in Select2 Drop Down Is Not Being Input For Filter Parameter .

I have written the Selected Value in to a Text Box With data binding as ng-model ="displayName" but Not Filtering :-(

Pankaj Parkar · Accepted Answer · 2015-05-03 10:32:27Z

1

Rather than using select2 library with you should use it angular version which ui-select2

Which provides better binding while dealing with angular scope. As you want to bind change event here you could simply use ng-change angular native directive.

Markup

<select ui-select2 ng-model="number" data-placeholder="Pick a number" ng-change="changeSelect()">
    <option value=""></option>
    <option value="one">First</option>
    <option value="two">Second</option>
    <option value="three">Third</option>
</select>

answered May 3, 2015 at 10:32

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prasad Over a year ago

Could You Please Send me Some reference Url for ui-select2 .

Pankaj Parkar Over a year ago

@PRASAD look at this plunkr plnkr.co/edit/4spbdn?p=info & this is github link github.com/angular-ui/ui-select2

Prasad Over a year ago

One Question Would it Support Update Operation .. I mean When the Values Selected at the @ Post Operation Would Show as Selected when Edited Right Or Do we need some Coding Magic ?

Prasad Over a year ago

Let us continue this discussion in chat.

Prasad Over a year ago

HI Pankaj I just Posted the Link in Our discussion Window Please take a Look

|

skazska · Accepted Answer · 2015-05-03 11:22:08Z

1

Trouble can be, that jquery widgets can append additional input elements breaking angular linking. If so i can suggest 2 solutions to try:

use angular-ui/ui-select instead select2
if you refuse it somewhat, use angular scopes $apply method to let angular know that something changed. I don't know if your piece of html is under controller, if yes you can just call $apply("displayName = '"+selectedval+"'") in your onchange handler

there could also be many other causes, for example form and filter is on different scopes

answered May 3, 2015 at 11:22

skazska

4312 silver badges8 bronze badges

2 Comments

Prasad Over a year ago

Could You Please Send me Some reference Url for ui-select2 .

skazska Over a year ago

angular-ui.github.io github.com/angular-ui/ui-select github.com/angular-ui/ui-select/wiki/Getting-Started

Collectives™ on Stack Overflow

How to Use DropDown Selected Vaue as Parameter for Filter in AngularJs?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related