CODEWITHSUNDEEP
angularjsforms
Pracede
Pracede

Reputation: 4371

AngularJS : how to create select option and set default select option?

I use AngularJS to create a html form. So in my form i have 2 text input and select option. The code is below : 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<script>
    angular.module("myapp", [])
            .controller("MyController", function($scope) {
                $scope.myForm = {};
                $scope.myForm.firstName = "Jakob";
                $scope.myForm.lastName = "Nielsen";
                $scope.myForm.town  = {name:"Not filled", value:"0"};
                $scope.towns  = [
                                            {name:"Not filled", value:"0"},
                                            {name:"New York", value:"1"},
                                            {name:"San Francisco", value:"2"},
                                            {name:"Boston", value:"3"},
                                            {name:"Miami", value:"4"}
                                        ];
            } );
</script>
<body ng-app="myapp">

<div ng-controller="MyController" >
    <form>
         First name : <input type="text" name="firstName" ng-model="myForm.firstName"> <br/>
         Last name : <input type="text" name="lastName"  ng-model="myForm.lastName">  <br/>
         Town : 
         <select ng-model="myForm.town" ng-options="town.value as town.name for item in towns"></select>



    </form>

    {{myForm.firstName}} | {{myForm.lastName}} | {{myForm.town.name}} | {{myForm.town.value}}

    <div>

</body>
</html>

I am facing two problem : 1. I cannot see option label. I don't understand. I use the answer here to write my select option. What's wrong please ? 2.In my controller i set the model of select option to have a option selected by default. I am wondering if it's the right way to do it ? 

$scope.myForm.town  = {name:"Not filled", value:"0"};

Thank you for helping. Here is my plunker link.

Upvotes: 1

Views: 2035

Answers (2)

Per Hornsh&#248;j-Schierbeck
Per Hornsh&#248;j-Schierbeck

Reputation: 15196

I fixed your plunker here: http://plnkr.co/edit/pJyOGUtBRiaoeFYeEDFD?p=preview

The problems were:

  1. Wrong syntax in ng-options. Should have been: item.name for item in towns or town.name for town in towns

  2. You have to set the selected value to one of the objects in the source - not a new object: $scope.myForm.town = $scope.towns[0];

There is another way you can solve the problem in 2. If you do not want to reference the correct object $scope.towns[0] then you can change the way angular tracks the model by specifying a track by. You will need to change the ng-options to town.name for town in towns track by town.value but then you set the selected index like this: $scope.myForm.town = {value : "1"};

Upvotes: 1

bakkal
bakkal

Reputation: 55448

Yes I think it's alright to set the default in the model, I don't see a problem with it.

As to your label problem, you have used the wrong iterator item in towns, should have been town in towns

<select ng-model="myForm.town" ng-options="town.value as town.name for town in towns"></select>

Upvotes: 1

Related Questions