kostyan_SV kostyan_SV - 11 months ago 49
AngularJS Question

How can I get an object from select element via AngularJS

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>

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?


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.

Answer Source

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

<div class="col-xs-12 form-control"


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) {


enter image description here