CODEWITHSUNDEEP
javascriptjqueryangularjs
htoniv
htoniv

Reputation: 1668

set default value using condition angularjs

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

Upvotes: 1

Views: 1280

Answers (3)

Sajal
Sajal

Reputation: 4401

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

Upvotes: 2

Max
Max

Reputation: 1844

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>

Upvotes: 1

Roman Koliada
Roman Koliada

Reputation: 5082

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;

Upvotes: 1

Related Questions