set default value using condition angularjs

Question

Here I am creating dropdown and setting default value.And this is my object

$scope.currentprop={
            name : "graphFillDirection",
            members : [{
                name : "ttb",
                caption : "Top to Bottom",
            }, {
                name : "btt",
                caption : "Bottom to Top"
            }, {
                name : "ltr",
                caption : "Left to Right"
            },{
                name : "rtl",
                caption : "Right to Left"
            }
            ],
            value : "ttb",
            //suppose  it is : value:""
        }

In this object i have members array and property value. So checking with iteraing members.name and value property and this is my html.

<select ng-model="currentprop.value" ng-options="value.name as value.name  for (key,value) in currentprop.members" ng-selected="{{currentprop.value == value.name}}"></select>

if the case currentprop.value == value.name matches then i set the value to ng-model. My question is if currentprop.value to be like value:"" then the iterated value never get matched with currentprop.value. so what i need is if value:"" then i set the members[0].name to the ng-model. some please help me. plnkr here

Sajal · Accepted Answer · 2016-06-03 13:37:12Z

2

Try ng-init in the select:

<select ng-model="currentprop.value" 
   ng-init="currentprop.value = currentprop.value || currentprop.members[0].name"
   ng-options="value.name as value.name  for (key,value) in currentprop.members" 
   ng-selected="{{currentprop.value == value.name}}">
 </select>

Working plunker

answered Jun 3, 2016 at 13:37

Sajal

4,4111 gold badge22 silver badges41 bronze badges

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

4 Comments

Max Over a year ago

ng-init is nice, but slow.. don't use this very often. Thanks.

Max Over a year ago

Actually it's a big improvement – reduce count of filters and bunch if directives like (ng-init, ng-mouseover, ng-mouseleave, ng-include), it's super unefficient

Sajal Over a year ago

Developers have been using window/document.onload eventhandlers in JQuery/javascript for a while. ng-init works the same. Not inefficent.

Sajal Over a year ago

Out of context, did you even read it? currentprop.value has its own scope.

Roman Koliada · Accepted Answer · 2016-06-03 13:15:34Z

1

You can set currentprop.value to members[0].name in Ctrl:

$scope.currentprop={
        name : "graphFillDirection",
        members : [{
            name : "ttb",
            caption : "Top to Bottom",
        }, {
            name : "btt",
            caption : "Bottom to Top"
        }, {
            name : "ltr",
            caption : "Left to Right"
        },{
            name : "rtl",
            caption : "Right to Left"
        }
        ],
        value : "",
    };
 $scope.currentprop.value = $scope.currentprop.value=="" ? $scope.currentprop.members[0].name : $scope.currentprop.value;

answered Jun 3, 2016 at 13:15

Roman Koliada

5,1723 gold badges36 silver badges65 bronze badges

Comments

Max · Accepted Answer · 2016-06-03 13:25:26Z

If currentprop.value can't be changed to "" during the app life after loading then this solution will work perfect for you:

$scope.currentprop={
        name : "graphFillDirection",
        members : [{
            name : "ttb",
            caption : "Top to Bottom",
        }, {
            name : "btt",
            caption : "Bottom to Top"
        }, {
            name : "ltr",
            caption : "Left to Right"
        },{
            name : "rtl",
            caption : "Right to Left"
        }
        ],
        value : "",
    };

 $scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name;

If it can be changing after controller initialized you need to do something like this:

$scope.$watch('currentprop.value', function(value) {
  if (value !== '') {
    $scope.currentprop.value = $scope.currentprop.members[0].name;
  }
});

Note: if you add watcher then you don't have to add $scope.currentprop.value = $scope.currentprop.value || $scope.currentprop.members[0].name; from first example, vecause watcher fires automatically at init.

Optimisation

Also ng-options can be simplified ng-options="value.name as value.name for value in currentprop.members"

You don't need to add ng-selected while you have ng-model in <select>. ng-model selects options automatically.

Default placeholde

If you need a default option to be a placeholder like "Select member", you can do this:

<select ng-model="currentprop.value"
        ng-options="value.name as value.name for value in currentprop.members">
  <option value="">Select a member</option
</select>

Collectives™ on Stack Overflow

set default value using condition angularjs

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related