2

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 enter image description here 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@gmail.com',
      '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
  • 14,077
  • 4
  • 33
  • 43
kairi
  • 298
  • 3
  • 16

1 Answers1

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@gmail.com',
      '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>
Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
  • i tried your code in jsfiddle http://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 http://jsfiddle.net/5ce8x12m/ can you explain what does the @ do? – kairi Apr 02 '20 at 08:59
  • @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 Apr 02 '20 at 09:05
  • @kairi Edited my answer to remove all `@` – Anurag Srivastava Apr 02 '20 at 09:10
  • 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? – kairi Apr 02 '20 at 09:12
  • 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 – Anurag Srivastava Apr 02 '20 at 09:15