How can I get an object from select element via AngularJS

Question

I have select html element like this:

<select required="" ng-model="studentGroup">
<option value="" selected="">--select group--</option>
<option value="1">java 15-1</option>
<option value="2">java 15-2</option>
<option value="3">java 15-3</option>
</select>

I want to get an object - studentGroup: {groupId:'1', groupName:'java 15-1'} when first option is selected(for example), where groupId - 'value' attribute of selected option, groupName - 'text' attribute.

How can I do this using AngularJS?

UPDATE:

It was solved as below:

<select ng-options="group.groupName for group in ctrl.groupList track by group.groupId" ng-model="ctrl.student.studentGroup"></select>
Selected studentGroup object: {{ctrl.studentGroup}}

where ctrl - my controller with groupList Array with studentGroup objects; studentGroup - selected object as I wanted.

Yo want to get it outside of the Angular controller? Is that it? — kidwon
– kidwon, Commented Mar 9, 2016 at 10:29
nop, inside controller I have an object 'studentGroup' which I want to fill with selected data and save in DB (for example). — svichkar
– svichkar, Commented Mar 9, 2016 at 10:35

Mr Lister · Accepted Answer · 2016-03-16 10:00:59Z

1

Hello I have made an example the uses a <select> element ,json array object to load values, custom directive that listens change events and calls controller function to give the selected object.

plunkr example: http://plnkr.co/edit/iCS0blQjceA4tIIb8bUV?p=preview

into html

{{selectedObj}}
<div class="col-xs-12 form-control"
         change-hall="filterHall(value)"
         items=items
         event-halls-list
         model='selectedObj'>

   </div>

custom directive(name it as you like)

.directive('eventHallsList', function($timeout, $log, $http, $compile) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        changeHall: '&',
        items: '=',
        model: '='
      },
      templateUrl: 'mytemplate.tpl.html',
      link: function(scope, element, attrs) {
      }

    }
  });

edited Mar 16, 2016 at 10:00

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Mar 9, 2016 at 11:36

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

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

3 Comments

svichkar Over a year ago

Greate! Thanks for your answer!

svichkar Over a year ago

It's a bit difficult explanation for my simple question.

Theo Itzaris Over a year ago

It is an advanced example that you will face(some time) if you intend to make a large web-application. Take your time and try to understand it because i use template, custom directive, and how we pass values from directive to controller. But is is corrent. you could tick it. Cheers.

Devendiran Kumar · Accepted Answer · 2016-03-09 10:43:49Z

1

This can be achieved with angular's ng-options directive. By declaring values for the select drop down in an array and iterating it with the help of ng-options directive

$scope.studentGroups = [{
  id: 1,
  groupName: 'java 15-1'
}, {
  id: 2,
  groupName: 'java 15-2'
}];


<select ng-options="studentGroup as studentGroup.groupName for studentGroup in studentGroups track by studentGroup.id" ng-model="selected"></select>

answered Mar 9, 2016 at 10:43

Devendiran Kumar

2233 silver badges13 bronze badges

Comments

AshBringer · Accepted Answer · 2016-03-09 10:48:30Z

1

How about that :

$scope.studentGroup = [
    { groupId: 1, groupName: 'java 15-1'},
    { groupId: 2, groupName: 'java 15-2'},
    { groupId: 3, groupName: 'java 15-3'},
    { groupId: 4, groupName: 'java 15-4'}
];

<select 
    ng-options="p.groupId + ' ' + p.groupName for p in studentGroup" ng-model="selectedPerson">
</select>

Demo

answered Mar 9, 2016 at 10:48

AshBringer

2,6732 gold badges24 silver badges43 bronze badges

1 Comment

svichkar Over a year ago

I don't want to see ID as you did.. but I got the main idea

lex82 · Accepted Answer · 2016-03-09 10:30:07Z

0

You can use the angular select directive together with ng-options. This way you can provide arbitrary objects as values.

answered Mar 9, 2016 at 10:30

lex82

11.4k2 gold badges48 silver badges72 bronze badges

Collectives™ on Stack Overflow

How can I get an object from select element via AngularJS

4 Answers 4

into html

custom directive(name it as you like)

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

into html

custom directive(name it as you like)

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related