removing null from angularjs select options

Question

I have a JSON object which is as follows

[{
"id": 1,
"firstName": "Sam",
"middleName": "poller",
"lastName": "Aniston",
"address": "New York City",
}, {
"id": 2,
"firstName": "Apple",
"middleName": null,
"lastName": "Jolie",
"address": "Beverley Hills",
}, {
"id": 3,
"firstName": "Anna",
"middleName": "mary",
"lastName": "Dobrev",
"address": "London",
}]

I'm populating this data in view using select as,

  <div >
  <select  ng-model="invigilator" ng-options="invigilator.id as  (invigilator.firstName+' '+invigilator.middleName+' '+invigilator.lastName) for invigilator in invigilatorList"  ng- click="getinvigilator(invigilator)" class="form-control"> 
                                <option value="">Select Invigilator</option>

                            </select></div>

But I am getting options as,

Sam poller Aniston
Apple null Jolie
Anna mary dobrev

how can i remove that null from the middle name and show only Apple Jolie.

Blackhole · Accepted Answer · 2014-06-04 10:28:52Z

2

Use the ternary operator:

<select ng-options="… as (invigilator.firstName + ' ' + (invigilator.middleName !== null ? (invigilator.middleName + ' ') : '') + invigilator.lastName) for …"></select>

Since the expression is becoming pretty complex, you can also (and you'd better to) move this code in a function:

<select ng-options="… as getFullName(invigilator) for …"></select>

// In the controller
$scope.getFullName = function (invigilator) {
    if (invigilator.middleName === null) {
        return invigilator.firstName + ' ' + invigilator.lastName;
    }

    return invigilator.firstName + ' ' + invigilator.middleName + ' ' + invigilator.lastName;
};

edited Jun 4, 2014 at 10:28

answered Jun 4, 2014 at 10:21

Blackhole

20.5k7 gold badges72 silver badges69 bronze badges

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

1 Comment

Hmahwish Over a year ago

Thanks,it worked both ways. i am going for the using function in the controller .

guru · Accepted Answer · 2014-06-04 11:11:52Z

1

A simple approach using array.join [invigilator.firstName,invigilator.middleName,invigilator.lastName].join(' '). This way you need not worry about any of the values incase if its null.

Sample demo: http://plnkr.co/edit/JTczvhMaNEeujrWnothP?p=preview

  <select ng-model="invigilator" ng-options="invigilator.id as  [invigilator.firstName,invigilator.middleName,invigilator.lastName].join(' ') for invigilator in data">
    <option value="">Select Invigilator</option>
  </select>

answered Jun 4, 2014 at 11:11

guru

4,0221 gold badge31 silver badges33 bronze badges

1 Comment

Hmahwish Over a year ago

Nice, seems a quick approach.Thanks.

Collectives™ on Stack Overflow

removing null from angularjs select options

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related