Set initial default value in Angularjs dynamic selector

Question

Does anyone know how to set up an initial default option in an Angularjs Select?

"myMapByCmd" below is a

 LinkedHashMap<String, List<String>>

and so the "value" in item as item for item in value track by $index" is a List<String>.
If I put "Select value" first in the List from the back end, the selector initially shows/selects the last item in the list.

Man there must be a simple way to do this (Damn Angular is so fiddelly !)

        <table> 
                        <tr ng-repeat="(key,value) in myMapByCmd">
                        <td><label>{{key}} Title:</label></td>

                        <td>
                            <select name="my_val_sel"
                                    ng-init="mycommand.myValue[$index] = value[0]"
                                    ng-model="mycommand.myValue[$index]"
                                    ng-options="item as item for item in value track by $index"                                     
                                    ng-change="changeMyValue()">
                            </select>
                        </td>               
                    </tr>    
            </table>

if I do this it shows last and unselected...

     <select name="my_val_sel" ng-model="mycommand.myValue[$index]"
     ng-options="item as item for item in value track by $index" 
    ng-change="changeMyValue()">
  <option value="" ng-selected="selected">FACK</option>
 </select>

the myMapByCmd JSON looks like: { "ONE": [ "my-one", "my-two", "my-three" ] }

Thanks!

Add a option tag inside select attribute.. I.e <select ....> <option value=""> Select value</option> </select> — Aravinthan K
– Aravinthan K, Commented Feb 24, 2016 at 18:40
if I do it shows last and unselected... <select name="aid_val_sel" ng-model="tl1command.aidValue[$index]" ng-options="item as item for item in value track by $index" ng-change="changeAidValue()"> <option value="" ng-selected="selected">FACK</option> </select> — JohnnyO
– JohnnyO, Commented Feb 24, 2016 at 18:41

amighty · Accepted Answer · 2016-02-25 00:29:36Z

1

Based on data its using, I have created demo here. If format of data is same and you are looking for similar result then there is no need to use track by $index.

HTML

<div ng-app="myApp" ng-controller="myCtrl">

<table> 
                        <tr ng-repeat="(key,value) in myMapByCmd">
                        <td><label>{{key}} Title:</label></td>

                        <td>
                            <select name="my_val_sel"
                                    ng-init="mycommand.myValue[$index] = value[0]"
                                    ng-model="mycommand.myValue[$index]"
                                    ng-options="item as item for item in value"   
                                    ng-change="changeMyValue()">
                            </select>
                        </td>               
                    </tr>    
            </table>
</div>

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {

  $scope.myMapByCmd = { "ONE": [ "my-one", "my-two", "my-three" ],                                              
                        "TWO": [ "my-one", "my-two", "my-three" ],
                        "THREE": [ "my-one", "my-two", "my-three" ]}
}]);

edited Feb 25, 2016 at 0:29

answered Feb 24, 2016 at 23:10

amighty

7844 silver badges12 bronze badges

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

2 Comments

JohnnyO Over a year ago

Congratulations ! You're the winner :) That's what worked. I load the first option as a default and ng-init selects it as above. Thanks a million !

amighty Over a year ago

I am glad that I could help you!

Aravinthan K · Accepted Answer · 2016-02-24 19:04:36Z

1

Add an empty value options inside select element. JsFiddle

 <select ng-options="...">
     <option value="">Select Value</option>
 </select>

answered Feb 24, 2016 at 19:04

Aravinthan K

1,9012 gold badges20 silver badges24 bronze badges

1 Comment

JohnnyO Over a year ago

This doesn't work the select fills and the last item is selected with "Select Value" at the top of the list.

Loren · Accepted Answer · 2016-02-25 18:59:09Z

0

As an example, this is what I use:

<select
    ng-model="record.id"
    ng-options="obj.id as obj.name for obj in page_list"
>
     <option ng-show="record.id == 0" 
          value="">-- Choose Page --
     </option>
</select>

JSFiddle

edited Feb 25, 2016 at 18:59

answered Feb 24, 2016 at 21:24

Loren

1902 silver badges14 bronze badges

1 Comment

Loren Over a year ago

I apologize for the incomplete solution. Here is the JSFiddle. Note that using this solution keeps the "Choose Page" from appearing again after an item has been chosen.

Bino · Accepted Answer · 2017-10-19 05:38:59Z

0

Future readers try this

<select ng-model="sel.myvar" ng-options="opt.label for opt in sel.myoptions">
    <option value="">-- choose an option --</option>
</select>

For more details , please refer here.

answered Oct 19, 2017 at 5:38

Bino

90417 silver badges23 bronze badges

Collectives™ on Stack Overflow

Set initial default value in Angularjs dynamic selector

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related