Angular generating an empty <option>

Question

I am generating some <option> elements using the ng-repeat directory. Using ng-repeat instead of ng-options is intentional.

However, it generates an empty option in addition to the actual array. Here's the code:

<select name="type" class="form-control" ng-model="selected_type" ng-change="select_change()" >
    <option ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>

$scope.types = [
    {value: '1', name: 'Sale'}, 
    {value: '2', name: 'Other'}
];
$scope.selected_type = $scope.types[0].value;

And a fiddle: http://jsfiddle.net/HB7LU/521/

Why is ng-options not appropriate for what you intend to achieve? — kubuntu
– kubuntu, Commented Sep 26, 2013 at 10:03
Removing ng-model from select fixed the issue - jsfiddle.net/HB7LU/529 — user700284
– user700284, Commented Sep 26, 2013 at 10:06

chriz · Accepted Answer · 2013-09-26 10:27:10Z

1

Here's a working fiddle, using ng-options

http://jsfiddle.net/HB7LU/527/

<select ng-model="selected_type" ng-change="select_change()" ng-options="c.name for c in types">

Then on script.js:

$scope.selected_type = $scope.types[0];

With that said, since you're just partly using angularjs you can just map the data in an array before you actually post in say in PHP.

answered Sep 26, 2013 at 10:27

chriz

1,8964 gold badges24 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thedjaney · Accepted Answer · 2013-09-26 10:28:38Z

try ng-options instead of making options tag yourself:

<div ng-controller="MyCtrl">
    <select ng-model="selected_type" ng-change="select_change()" ng-options="type.value as type.name for type in types">
    </select>
</div>

http://jsfiddle.net/aBPdv/

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.types = [
    {value: '1', name: 'Sale'}, 
    {value: '2', name: 'Other'}
    ];
    $scope.selected_type = $scope.types[0].value;
    $scope.select_change = function(x){
        alert($scope.selected_type);
    }
}

Thomas Pons · Accepted Answer · 2013-09-26 10:30:27Z

Just use the ng-model attributes on your option tag not on your select tag (use it where the ng-repeat is defined) like that :

<select ng-change="select_change()">
    <option ng-model="selected_type" ng-repeat="type in types" value="{{type.value}}">{{type.name}}</option>
</select>

Then change your

$scope.selected_type = $scope.types[0].value;

to

$scope.selected_type = $scope.types;

But your ng-change will not work because no ng-model attribute is set so no ngModelController is assign to this element.

So if you want to know when the value of the select change you have to do a directive on the select element.

For all these reasons ng-options is always and i say always the right direction for a select input usage.

This is in the right direction. But by doing this, I can't detect what option is chosen

Collectives™ on Stack Overflow

Angular generating an empty <option>

3 Answers 3

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Related