keslami keslami - 3 months ago 5x
HTML Question

How to get rid of a drop down menu option/empty space in drop down menu - angular JS?

I'm trying to figure out how to get rid of an empty white space that shows up in my drop down menu. There was an "All" option that was not supposed to be in the menu. I got rid of that option (probably not the right move), and sometimes when I refresh I can see the menu and there's a white space and other times it just gives me an error on the console. I'm not sure why this variety exists.

Ultimately, I have to get rid of the All option (the right way) and remove a white space that it leaves.

Here is my js:

], function (app) {
return app.directive('roleSelect', ['Reference', function (Reference) {
return {
restrict: 'A',
scope: {
selectedRole: '=',
selectedTopics: '=?',
presetRole: '=?',
topicNameOnly: '@?',
link: function ($scope, elem, attr) {
$scope.talentRoles = [];
$scope.topicNameOnly = ($scope.topicNameOnly === 'true');
$scope.notUsePresets = ($scope.notUsePresets === 'true');
if(!$scope.presetRole) {
$scope.presetRole = {id: -1, code: "ALL", description: "All"};
} // this is where the 'All' option comes from, so I just got rid of this if statement. Not sure if this is the right thing to do
if(!$scope.notUsePresets) {
Reference.getTalentRoles($scope, function (response) {
$scope.talentRoles = response.concat($scope.talentRoles);
for(var i = 0;i<$scope.talentRoles.length;i++){
if($scope.selectedRole && $scope.selectedRole.description == $scope.talentRoles[i].description){
$scope.selectedRole = $scope.talentRoles[i];
$scope.showTopics = function(){
return attr.selectedTopics
$scope.roleChanged = function(role) {
$scope.selectedTopics = [];
templateUrl: '/directives/control/role-select.html'

And here is my html:

<select class="form-control" required
ng-options="talentRole as talentRole.description for talentRole in talentRoles track by" id="talentRole"
<option ng-if="true" selected="true" value="" class="select-placeholder"><ln code="" args=""></ln></option>
<div topic-input

I'm not too familiar with angular JS/ html. However, I do understand that the
tag ensures that whatever was chosen from the user side stays selected on my side (as an admin). So, that functionality needs to remain. I also understand that ng-options is the mother of this menu. So perhaps there needs to be some configuration with this tag.

Here is a snapshot before deleting the if statement from the JavaScript:

With All

It seems that when I delete the if statement, I get this error on the console:

TypeError: Cannot read property 'description' of undefined

So, I'm guessing getting rid of that condition is not the right thing to do. I apologize if I have not given enough, but please let me know what I can do to help you to help me further and I will be more than glad to accommodate.


I think you should remove presetRole: '=?' from your $scope initialization too if you remove the if.

Also, you need to check for any other references to presetRole, as it seems that even if you remove the if, the presetRole is still added to talentRoles.

Tell me if it worked.