AngularJS Select list has a blank item

Question

I have a few Select lists on my page one of them works fine the rest of them have a blank item at the top of the options list.

This works

<td>
    <select data-ng-model="c.ResultOptionId" ng-change="checkResult(c)">
        <option value="" selected>--Select Option--</option>
        <option data-ng-repeat="opt in c.ResultOptions" value="{{opt.Value}}">{{opt.Text}}</option>
    </select>
</td>

This has a extra blank item

<td>
    <select data-ng-model="c.EquipmentId">
        <option value="" selected>--Select Equipment--</option>
        <option data-ng-repeat="eq in c.Equipment" value="{{eq.Value}}">{{eq.Text}}</option>
    </select>
</td>

The HTML generated for the select list item is

<td>
    <select data-ng-model="c.EquipmentId" class="ng-pristine ng-valid ng-not-empty ng-touched">
        <option value="? number:0 ?"></option>
        <option value="" selected="">--Select Equipment--</option>
        <!-- ngRepeat: eq in c.Equipment -->
        <option data-ng-repeat="eq in c.Equipment" value="2" class="ng-binding ng-scope">EQ-001</option>
        <!-- end ngRepeat: eq in c.Equipment -->
    </select>
</td>

I'm new to AngularJs but from what I've read this should work. I have checked the data returned from my API call and that is correct there are no unexpected items.

Thanks for any help

So what you want to avoid? This line <option value="? number:0 ?"></option>? — developer033
– developer033, Commented Jul 4, 2016 at 15:46
@developer033 I don't want that line. I'm not sure what is causing it or why it is there. — Jeff Finn
– Jeff Finn, Commented Jul 4, 2016 at 15:49
Just for kicks, try ng-selected="true" on the '--Select Equipment--'' option insteadl of selected. — developthewebz
– developthewebz, Commented Jul 4, 2016 at 15:52

JB Nizet · Accepted Answer · 2016-07-04 16:02:11Z

If you use ng-repeat to generate the options, as the documentation indicates, the bound value is, always, a string.

But the value stored in the ngModel (c.EquipmentId) is a number. So you're telling Angular: here's a list of options with their values, which are strings, and please select, among the string values, the one equal to this number. Since a string is never equal to a number, angular generates an additional option.

So, as usual, use ng-options to generate your options:

<select data-ng-model="c.EquipmentId"
        ng-options="eq.Value as eq.Text for eq in c.Equipment">
    <option value="">--Select Equipment--</option>
</select>

And make sure that c.EquipmentId contains one of the proposed equipment values, or is null or undefined.

developer033 · Accepted Answer · 2016-07-04 15:54:58Z

Here's a snippet working:

var app = angular.module('app', []);

app.controller('mainCtrl', function ($scope) {
  $scope.equipments = [];
  for (var i = 0; i < 5; i++) {
    $scope.equipments.push(i);
  }
  // If you don't want any blank option => $scope.equip = $scope.equipments[0];
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>      
</head>

<body ng-controller="mainCtrl">
  <table>
    <thead>
      <tr>
        <td>Equipment</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <select data-ng-options="equip as equip for equip in equipments" data-ng-model="equip">
            <!-- you can coment this line below, if you don't want blank option -->
            <option value="">-- Select equipment--</option>
          </select>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

2ps · Accepted Answer · 2016-07-04 15:58:02Z

Generally, speaking: (1) you should use ng-options for options in a select and (2) a blank or new option means that the current model value for the select does not appear in the list of options.

<td>
    <select data-ng-model="c.EquipmentId" data-ng-options="eq.Value as eq.Text for eq in c.Equipment">
        <option value="">--Select Equipment--</option>
    </select>
</td>

In the javascript, make sure to initialize c.EquipmentId in your controller.

c.EquipmentId = ""; // this will initialize the option to start at the `--Select Equipment--` option.  
c.EquipmentId = c.Equipment[0].Value; // this will initialize the option at the first Equipment value.
// for the issue that you stated, it looks like c.EquipmentId is either null or 0, so instead you can do something like this:
if (!c.EquipmentId) c.EquipmentId = "";

Collectives™ on Stack Overflow

AngularJS Select list has a blank item

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related