CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
code-8
code-8

Reputation: 58702

Display Default Filter base on specific Select Option - AngularJS

I have a select menu. 

<select id="dd" ng-show='data != null' ng-model='search'></select>

and my other HTML contents

<div ng-repeat="obj in data | filter:search" ng-show="search">

    <div class="row">

        <!-- Country -->
        <div class="col-xs-4 text-center" >
            <p>[[obj.country]]</p>
            <img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
        </div>

        <!-- Main Info -->
        <div class="col-xs-4" >
            <p class="company-name">[[obj.user.username]]</p>
            <p>[[obj.obj.phone_public]]</p>
            <p>[[obj.user.email]]</p>
            <a href="[[obj.obj.url]]">[[obj.obj.url]]</a></span> <span class="col span_2_of_6">
        </div>

        <!-- Logo -->
        <div class="col-xs-4 pull-right" >
            <img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
        </div>

    </div>

    <br><hr>


</div>

I triggered the filter when the user change that select menu.

I'm trying to set USA as my default selection. So I did this in my JS section 

$.each(unique_countries, function (index, value) {
    if(value == 'United States of America'){
        $("#dd").append($("<option value= '" + value + "' selected='selected' >").text(value));
    }else{
        $("#dd").append($("<option value= " + value + ">").text(value));
    }
});

So far so good, and it work fine - if I change/touch my select menu.

My goal is to display the result of the filter as I would have the select menu to USA as soon as landing on the page.

So far it didn't do that. You may see what I have here : JSFiddle

Result now :

enter image description here

Result I want it to be :

enter image description here

Any hints on this ?

Upvotes: 0

Views: 58

Answers (1)

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

instead of adding selected attribute in the html loop,

add

$scope.search = 'United States of America';

and replace the html loop with just

$.each(unique_countries, function (index, value) {
    $("#dd").append($("<option value= " + value + ">").text(value));
});

working solution - https://jsfiddle.net/0xj47wax/1/

Upvotes: 1

Related Questions