Remove empty option when ng-model is added in dropdown (AngularJS 1.4)

Question

Im currently doing a dropdown and getting the data via angular JS, but whenever i add ng-model="email_mobile" it adds an empty field and I cant remove it, i tried doing the correct answers here but I dont think that its applicable because I am getting 2 values in 1 array:

JS

   $scope.configs = [
      {'email': '[email protected]',
      'phone': '123',
       'value': 'config1'},
    ];

$scope.getValue = function(){
  $scope.value =$scope.email_mobile;
  console.log($scope.value )
}

blade

        <select class="form-control" name="email_mobile" id="email_mobile" ng-model="email_mobile" ng-change="getValue()" required>
          <option data-ng-repeat="x in configs" ng-if="x.email" value="@{{x.email}}" selected>@{{x.email}}</option>
          <option data-ng-repeat="x in configs" ng-if="x.phone" value="@{{x.phone}}" selected>@{{x.phone}}</option>
        </select>

another thing is, the reason why my code is like that, because I also need to get the value of ng-model="email_mobile" on change. I only need to remove the empty value while still getting the value of the dropdown on change

Anurag Srivastava · Accepted Answer · 2020-04-02 09:10:17Z

2

You can achieve this by setting the default value of select in the format of your options' value:

$scope.email_mobile = "@" + $scope.configs[0].email;

Check code below:

angular.module("myApp", [])
  .controller("myCtrl", function($scope) {
    $scope.configs = [{
      'email': '[email protected]',
      'phone': '123',
      'value': 'config1'
    }];
    
    $scope.email_mobile = $scope.configs[0].email;
    
    $scope.getValue = function() {
      $scope.value = $scope.email_mobile;
      console.log($scope.value)
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <select class="form-control" name="email_mobile" id="email_mobile" ng-model="email_mobile" ng-change="getValue()" required>
    <option data-ng-repeat="x in configs" ng-if="x.email" value="{{x.email}}" selected>{{x.email}}</option>
    <option data-ng-repeat="x in configs" ng-if="x.phone" value="{{x.phone}}" selected>{{x.phone}}</option>
  </select>
</div>

edited Apr 2, 2020 at 9:10

answered Apr 2, 2020 at 8:25

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

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

5 Comments

kairi Over a year ago

i tried your code in jsfiddle jsfiddle.net/yu0L9jsc and yes it works, but when I tried it to my end, it doesnt. I tried tweaking the codes in jsfiddle, but whenever I change the @ to any string value, it adds the empty value again jsfiddle.net/5ce8x12m can you explain what does the @ do?

Anurag Srivastava Over a year ago

@kairi You have added values in your options like @{{x.email}} so I added the @. Should work if you remove that from your options

Anurag Srivastava Over a year ago

@kairi Edited my answer to remove all @

kairi Over a year ago

hmm, i really don't understand why adding default value fixes the empty drop down, since u said that if I remove that it should work, i tried tweaking the code to $scope.email_mobile = $scope.configs[0].email; and it works! I still dont understand how it removes the empty value :/ do you have any guides that explains that?

Anurag Srivastava Over a year ago

What happens is that your select has ng-model="email_mobile", and if you don't set a value to it before choosing an option, it will show an empty value (because no valid value from the options has been chosen yet). In my code, we set the select value as value of the first option, so no more empty field

Collectives™ on Stack Overflow

Remove empty option when ng-model is added in dropdown (AngularJS 1.4)

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