Удалить пустую опцию, когда ng-модель добавлена ​​в выпадающий список (AngularJS 1.4)

Question

Я сейчас делаю выпадающий список и получаю данные через angular JS, но всякий раз, когда я добавляю ng-model = "email_mobile", он добавляет пустое поле , и я не могу удалить его , я попытался сделать правильные ответы здесь , но я не думаю, что это применимо, потому что я получаю 2 значения в 1 массиве:

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>

Другая причина в том, что мой код такой, потому что мне также нужно получить значение ng-model="email_mobile" при изменении. Мне нужно только удалить пустое значение, в то же время получая значение раскрывающегося списка при изменении

Answer 1

Этого можно добиться, установив значение по умолчанию для выбора в формате значения ваших опций:

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

Проверьте код ниже:

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>