Remove first value ? object:null ? in select option Angularjs

Question

I'm having problems with select option in Angularjs This is code in file js

$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: Car });
$scope.ListOption.push({ Value: "1", Name: House });

Here's what the code HTML looks like

<select class="form-control" id="Category" ng-model="Category">

<option ng-repeat="option in ListOption" value="{{option.Value}}">
 {{option.Name}}</option>

</select>

The generated html is

<select class="form-control ng-pristine ng-valid" ng-model="Category" style="padding: 0px;">
<option value="? object:null ?"></option>
<option ng-repeat="option in ListOption" value="0" class="ng-binding ng-scope">Car</option>
<option ng-repeat="option in ListOption" value="1" class="ng-binding ng-scope">House</option>
</select>

I have quite a headache on this issue. Looking forward to having someone help me the other way

Dabbas · Accepted Answer · 2018-01-17 06:36:17Z

1

AngularJs tend to do this (generate extra option elment) when the value of the variable in ng-model doesn't match any of the values of the existing <option>.
You can solve it by setting an initial value (of the same type also), and it's one of the values in your <option> elements .
Or add one <option> element without value and with text Select one inside it. so it'll be selected.

function MyController($scope) {
$scope.Category = "1";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "0", Name: 'Car' });
$scope.ListOption.push({ Value: "1", Name: 'House' });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyController">
<select class="form-control" id="Category" ng-model="Category"
  ng-options="item.Value as item.Name for item in ListOption">

</select>

{{Category}}
</div>

Make sure $scope.Category is the same type (not only value) as Value in ListOption variable, otherwise AngularJs will create extra option and select it.

edited Jan 17, 2018 at 6:36

answered Jan 17, 2018 at 5:54

Dabbas

3,2588 gold badges51 silver badges78 bronze badges

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

2 Comments

Triet Pham Over a year ago

I understand but what i want to be when the default load will select the Value is 0 and Name is Car, do you have any way to help me?

Dabbas Over a year ago

You're welcome :) don't forget to check as correct answer it is.

Satpal Tanan · Accepted Answer · 2018-01-17 05:36:34Z

1

The first option

<option value="? object:null ?"></option>

is generated because the ngModel value Category is not defined and select will match the value of Caegory with its options. Since no option is undefined, it adds a dummy option itself.

To solve this yyu can initialize the ngModel value Category to the first option automatically or add a new option with value as blank string and then initialize Category to blank string. It will also trigger your validation if any. New options would be

$scope.Category = "";
$scope.ListOption = [];
$scope.ListOption.push({ Value: "", Name: "Please Select" });
$scope.ListOption.push({ Value: "0", Name: "Car" });
$scope.ListOption.push({ Value: "1", Name: "House" });

Hope it helps.

answered Jan 17, 2018 at 5:36

Satpal Tanan

1,1087 silver badges17 bronze badges

1 Comment

Triet Pham Over a year ago

I want to be when the default load will select the Value is 0 and Name is Car, do you have any way to help me?

Vignesh S · Accepted Answer · 2018-01-17 06:39:17Z

0

As you wanted to mention the first value as default you can use ng-selected in option to set 0 as default. Below mentioned code sample for your reference.

<select class="form-control" id="Category" ng-model="Category">

<option ng-repeat="option in ListOption" value="{{option.Value}}" ng-selected="option.Value == '0'">
 {{option.Name}}</option>

</select>

answered Jan 17, 2018 at 6:39

Vignesh S

391 silver badge5 bronze badges

Collectives™ on Stack Overflow

Remove first value ? object:null ? in select option Angularjs

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related