Default Select Option Using JSON Object in Angular

Question

I have the following code that populates a certain select item on a page:

<select ng-model="activity.selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select><br>

I am wondering if it is somehow possible to specify a default option such that I can give it a Title and an ID. For instance, if default is selected, then activity.selectedParent.Title = "None" and activity.selectedParent.id = 0. Is this possible to somehow specify this within the <select> tag using Angular directives? Otherwise, what is the most efficient way of achieving this?

See ng-selected

Jonathan Lam
– Jonathan Lam

2016-07-08 03:35:57 +00:00
Commented Jul 8, 2016 at 3:35 — Jonathan Lam
– Jonathan Lam, Commented Jul 8, 2016 at 3:35

developer033 · Accepted Answer · 2016-07-08 14:19:18Z

1

If I understood well your question you want to set an object even if the default is selected, then you can do it in two ways:

Using ngInit directive inside your select tag, as follows:

ng-init="selectedParent = { '_id': 0, 'title': 'None' };"
Initializing your object in your controller:

$scope.selectedParent = { "_id": 0, "title": "None" };

EDIT:

I think I got what you want, now: you want to have a default option instead of a blank as first option, right? If so, you can simply add this element to your existent array, using unshift method, so it'll be placed as first element as below:

$scope.parents.unshift($scope.selectedParent);

Here's a snippet working:

var app = angular.module('app', []);

app.controller('mainCtrl', function($scope) {
  $scope.parents = [  
     {  
        "_id":1,
        "title":"first"
     },
     {  
        "_id":2,
        "title":"second"
     },
     {  
        "_id":3,
        "title":"third"
     },
     {  
        "_id":4,
        "title":"four"
     }
  ];

  $scope.selectedParent = {
    "_id": 0,
    "title": "None"
  };

  $scope.parents.unshift($scope.selectedParent);
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl">
  <select ng-model="selectedParent" ng-options="parent as parent.title for parent in parents track by parent._id"></select>
  <hr> 
  Selected: <span ng-bind="selectedParent | json"></span>
</body>

</html>

edited Jul 8, 2016 at 14:19

answered Jul 8, 2016 at 3:53

developer033

25k8 gold badges85 silver badges113 bronze badges

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

9 Comments

MadPhysicist Over a year ago

Thanks. If I Use ng-init, will the default value still remain an option even if select something else and then decide to come back to default again?

developer033 Over a year ago

@MadPhysicist, can you see my edit? I think I understood you want now.. let me know if I'm missing something..

MadPhysicist Over a year ago

Did you add Unshift? What does that do? Basically, I am always displaying a list of parents that I query from DB. However, I also want to have an option on that list that makes the entry have no parent (i.e. become child-eligible itself). Hence, I was wondering how to add that to the list.

developer033 Over a year ago

Unshift adds an elements to the first position, which is you want. Can you edit your question to demonstrate it?

MadPhysicist Over a year ago

Having read your edit, I think it is almost what I want. If an entry has a parent, I would like the parent item to be selected from the list. If it has no parent (it is child-eligible itself), then the "No Parent" entry that we added should be displayed. Either way, the "No Parent" entry should always be present in the list to provide a way to edit this item from a being a child to being a self-sufficient specie. Hopefully, I am being clear.

|

Marcus Höglund · Accepted Answer · 2016-07-08 14:02:42Z

1

If the array used in the ng-options doesn't contain the value you wish to set as default, then the easiest way to achieve this is to add the default value to the array.

First set the selectedParent in the controller

$scope.selectedParent = { "_id": 0, "title": "None" };

Then add it to the first position in the array

$scope.parents.splice(0,0,$scope.selectedParent);

And finaly set the ng-model of the select to ng-model="$scope.selectedParent"

edited Jul 8, 2016 at 14:02

answered Jul 8, 2016 at 6:57

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Collectives™ on Stack Overflow

Default Select Option Using JSON Object in Angular

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related