Empty first element in dropdown list

Question

I am quite a beginner with AngularJS and currently I am working on a web application in Django where I use AngularJS for the frontend part i can say. My problem is that the dropdown list which is populated with objects from a scope always start with a blank element (if i select one from the list, the issue is gone). This create problems because if the user doesn't select anything the POST request normally it will not work anymore. I would like to know how to have something like a preselected value or something similar. Here's part of my code:

Select tag:

<select id="sel" class="input-block-level" ng-model="list_category">
            <option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
            <option value="Other">Other</option>
        </select>

$scope.list_categories:

var listcategoryPromise = ListCategory.get();
    listcategoryPromise.then(function(response) {
        $scope.list_categories = {
            meta : response.data.meta,
            data : response.data.objects
        };
    });

possible duplicate of [Why does angularjs include an empty option in select](http://stackoverflow.com/questions/12654631/why-does-angularjs-include-an-empty-option-in-select) — pkozlowski.opensource, Feb 05 '13 at 12:32

score 59 · Accepted Answer · answered Feb 05 '13 at 12:35

59

Use the directive ng-options and remove the value from the 'Other' option, like this:

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">    
    <option value="">Other</option>
</select>

This ensures that if list_category is empty (no entry selected), the 'Other' option is selected (by default).

jsFiddle: http://jsfiddle.net/bmleite/gkJve/

answered Feb 05 '13 at 12:35

bmleite

26,850
4
71
46

I've tried something similar before and I've run into the same problem. For me the value="other" is important because i use ng-show to pop up a text field then is selected: – MariusNV Feb 05 '13 at 16:34
2

That's not a problem. Change the `ng-show` to `ng-show="!list_category"` (show input only if no `list_category` is selected) fiddle: http://jsfiddle.net/bmleite/gkJve/2/ – bmleite Feb 05 '13 at 16:48
what about multiple select? I cannot apply it in this case. – FunnyJava Mar 21 '18 at 06:43

score 5 · Answer 2 · answered Feb 05 '13 at 12:34

Find the below working example below you should avoid ng-repeat with options so please see below sample code with

<body ng-controller="testcontroller">
         <select ng-model="item" ng-options="item.ID as item.Title for item in items">
         </select>
            <span>{{item}}</span>
    </body>

App.controller('testcontroller', function ($scope) {
    $scope.item = '000001';
    $scope.items = [
      { ID: '000001', Title: 'Chicago' },
      { ID: '000002', Title: 'New York' },
      { ID: '000003', Title: 'Washington' }
    ];
});

maxdec · Answer 3 · 2013-02-05T12:40:39.623

3

You can use a specific syntax for <select> tags with Angularjs.

Inspired from the documentation page:

<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
    <option value="Other">Other</option>
</select>

edited Feb 05 '13 at 12:40

answered Feb 05 '13 at 12:34

maxdec

5,707
2
30
35

score 2 · Answer 4 · edited May 22 '14 at 13:56

Here's some code directly from the AngularJs.org website about select lists:

<select ng-model="color" ng-options="c.name for c in colors"></select>

First, as you can see, you don't need to use the ng-repeat to build your options list. Angular is going to basically let you do a foreach loop on a collection to build your option list. Second, you have the ng-model which is on the select, but isn't the same as your collections name. This is going to be your item which is actually collected at post time .

function MyCntrl($scope) {
   $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light'},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark'},
      {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red
}

Okay, and here's the javascript controller code. $scope.colors is the collection and $scope.color is the model property which has been assigned to the select list in the html. As you can see from this example the model property is being given a default starting value of the third option in the array. For you, this can be set from the http.get you're using for loading up your page initally.

Now when you're doing the foreach, you're basically grabbing the 'name' value from the collection and you're saying 'show this value' in the dropdown and use this value on the post. By having that inital model property set, you should be able to avoid having an empty option field in your drop down list.

Reference: AngularJS Select

score 2 · Answer 5 · edited May 23 '17 at 12:08

2

in my opinion this answer is cleaner:

$scope.form = {type : $scope.typeOptions[0].value};

http://jsfiddle.net/MTfRD/2010/

edited May 23 '17 at 12:08

Community

1
1

answered Aug 05 '15 at 11:10

burnaDLX

171
1
3
10

Aamir · Answer 6 · 2017-12-17T22:36:05.403

0

The Blank empty option on top of drop down will appear if you have set ng-model with some value which is not contained in the list options created after the ng-Repeat. Now if you consider the original post and remove the ng-model or set some valid value in ng-model, it will work fine or you can set selected first item as

$scope.list_category = $scope.list_categories.data[0].id;

edited Dec 17 '17 at 22:36

answered Jan 18 '16 at 06:05

Aamir

695
10
11

Empty first element in dropdown list

6 Answers6

Linked