How to remove empty values in drop down using ng-option in angular js?

Question

How to remove empty and blank values in the Drop Down using ng-option in angular js?
Some data's are in college name some of it not having the college name so what is happening in the drop down, the empty values are displaying.
I am expecting only values, not empty blank items, so how to remove empty items.
My Plunker.
And how to Mingle College Name and School Name into a single Drop Down.

My Drop Down:-

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

  <label for="">school name</label>
       <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required><option value="">All</option></select>

My Html:-

<div class="col-md-3">
    <label for="">College name</label>
    <select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <label for="">school name</label>
    <select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users" class="form-control" placeholder="search" required>
        <option value="">All</option>
    </select>
    <div ng-repeat="question in users | filter: searchtable | filter: myrole"> <small>
                  <table border="0">
                    <tbody>
                      <th>{{question.displayName}}</th>
                    <th style="background: yellow;">,{{question.roles[0]}}</th>
                    <th style="background: light;">,{{question.request_role[0]}}</th>

                    </tbody>
                          </table>


                  </small> </div>
    <p>How to mingle college name and school name into single drop down:-</p>
    <p>And how to do filter college name and school name while selecting the filed</p>
</div>

My Data:-

    $scope.users = [{
"_id": "59a6c7c96c2ce324124cc1d8",
"displayName": "blink foundation",
"provider": "local",
"location": "icf",
"username": "blink",
"dob": "1991-10-04T18:30:00.000Z",
"phone": 7299345250,
"religion": "Hindu",
"college_name": "Arignar Anna",
"__v": 2,
"created": "2017-08-30T14:12:25.397Z",
"roles": [
"block"
],
"request_role": [
"Change Agent"
],
"lastName": "foundation",
"firstName": "blink"
},
{
"_id": "598abfe4cce8ed582a2d8b32",
"displayName": "avinaash muthukumar",
"provider": "local",
"username": "avinaash muthu",
"__v": 0,
"created": "2017-08-09T07:55:16.511Z",
"roles": [
"admin"
],
"request_role": ["Change Agent"],
"firstName": "avinaash"
},
{
"_id": "5979a591c999e9302caece13",
"displayName": "Ajmal Afthab",
"provider": "local",
"location": "Urapakkam",
"username": "ajmal_afthab",
"dob": "1995-01-23T18:30:00.000Z",
"phone": 9500269131,
"religion": "Islam",
"school_name": "public school",
"__v": 1,
"roles": [
"kp"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Moral Ethics",
"Social Psychology"
],
"lastName": "Afthab",
"firstName": "Ajmal"
},
{
"_id": "5978a2886d5b10ec321a2114",
"displayName": "happy selvam",
"provider": "local",
"username": "happy",
"__v": 0,
"created": "2017-07-26T14:09:12.730Z",
"roles": [
"admin"
],
"request_role": ["parent"],
"categories": [],
"lastName": "selvam",
"firstName": "happy"
},
{
"_id": "58e73c5c9e2f3f1421e241be",
"displayName": "sarawana kumar",
"religion": "hindu",
"college_name": "IIT",
"__v": 2,
"roles": [
"user"
],
"request_role": ["school student"],
"categories": [
"Religion & Culture",
"Social Psychology"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "58d0fab62758cc482c295eba",
"displayName": "avinaash kumaran",
"provider": "local",
"username": "avinaash",
"roles": [
"block"
],
"request_role": ["parent"],
"categories": [],
"lastName": "kumaran",
"firstName": "avinaash"
},
    ]

Vivz · Accepted Answer · 2017-08-31 14:44:52Z

4

You can use a filter (or write a custom filter) to remove the blank options for your first case.

HTML:

<select data-ng-model="searchtable.college_name" id="searchtable" ng-options="item.college_name as item.college_name for item in users | filter:{ college_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>
<label for="">school name</label>
<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.school_name as item.school_name for item in users | filter:{ school_name :'!!'}" class="form-control" placeholder="search" required>
    <option value="">All</option>
</select>

Now for your second case, if you want to combine both school and colleges into one dropdown, just add the following. Use a custom filter to return non empty values.

HTML

<select data-ng-model="searchtable.school_name" id="searchtable" ng-options="item.college_name +''+ item.school_name for item in users|filter:notBlank" class="form-control" placeholder="search" required><option value="">All</option></select>

JS:

 $scope.notBlank= function(item){
   return (item.college_name || item.school_name)
}

Working Plunker: http://plnkr.co/edit/QF5rnghuIWfcdeQdbAvd?p=preview

edited Aug 31, 2017 at 14:44

answered Aug 31, 2017 at 13:52

Vivz

6,6282 gold badges19 silver badges34 bronze badges

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

5 Comments

Vivz Over a year ago

@R.ManiSelvam Check now and see if this is what you are looking for. :)

R. Mani Selvam Over a year ago

thank you so much, it's working perfectly, and how to order by alphabetical in this mingled drop down.... thanks for advance

Vivz Over a year ago

You can check out stackoverflow.com/questions/12310782/… and see. Please upvote my answer if it helped you.

R. Mani Selvam Over a year ago

Sorry to disturb you I am looking solution for this stackoverflow.com/questions/46034098/… if possible please check it and update...

Vivz Over a year ago

@R.ManiSelvam I have provided an answer stackoverflow.com/questions/46034098/…

Collectives™ on Stack Overflow

How to remove empty values in drop down using ng-option in angular js?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related