Search code examples
angularjsselectangular-ngmodelng-switch

Remove empty option in the select using ng-model

I am new to angular js. In my code user changes the value of radio buttons. And depending on the value of the selected radio button, a piece of code is loaded from the ng-switch
HTML:

<body ng-app="">
  <div ng-repeat="button in modes">
    <label>
      <input type="radio" ng-model="data.mode" value="{{button.value}}" ng-click="clearObjectIdModal()" name="e_modes">
        {button.label}}
    </label>
  </div>

  <div ng-switch on="data.mode">

    <div ng-switch-when="client">
      <label for="e_selected_object_item_id">Select Client name: </label>
      <select id="e_selected_object_item_id" name="e_selected_object_item_id" ng-model="currentDataItem.object_id" required>
        <option ng-repeat="item in customersListArr" value="{{ item.id }}">{{ item.Name }}</option>
      </select>
    </div>

   <div ng-switch-when="agent">
     // This part is similar to the previous one
   </div>

  </div>
</body>

Controller part:

$scope.data = {};
$scope.setFile = function () {
  if ($scope.data.mode == 'client')
    return 'client';
  else if ($scope.data.mode == 'agent')
    return 'agent';

$scope.modes = [{
  value: 'client',
  label: 'Client'
},{
  value: 'agent',
  label: 'Agent'
}];

$scope.currentDataItem = data;  // data is preloaded from inputs in form

There is also a ng-click="clearObjectIdModal()" that clears the model when switching radio buttons:

$scope.clearObjectIdModal = function() {
  $scope.currentDataItem = "";
}

The problem is that every time when the radio button is switched to the select value, which dynamically changes, the value of the first option in it becomes equal to undefined. Because in the array from where these options are built there is no such object_id (This is the id that is not there, so an empty field is drawn).
That is, there are all works. But the first option in the select(after switching to another radio button) is rendered as an empty string.
There are thoughts, how it can be fixed?

Solution

  • I'm not sure if I understand you problem correctly but I would suggest a few improvements.

    1. change your setFile function to as follows

      $scope.setFile = function (){return $scope.data.mode;}

    I also do not see the closing brackets for your function in your code. Besides if your function will only return the data.mode then why need the function?

    1. I would suggest initialize your data object properly like:

      $scope.data = {mode:'client'};

    2. Change your clearObjectIdModal function as:

      $scope.clearObjectIdModal = function(mode) { $scope.currentDataItem = ""; $scope.data.mode=mode; }

    and in your HTML use it as ng-click="clearObjectIdModal(button.mode)"