322

Given the following select element

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

Is there a way to get MAGIC_THING to be equal to the currently selected size, so I have access to size.name and size.code in my controller?

size.code affects a lot of the other parts of the app (image urls, etc), but when the ng-model of item.size.code is updated, item.size.name needs to be updated as well for the user facing stuff. I assume that the correct way to do this is capturing the change event and setting the values inside of my controller, but I'm not sure what I can pass into update to get the proper values.

If this is completely the wrong way to go about it, I'd love to know the right way.

10 Answers 10

502

Instead of setting the ng-model to item.size.code, how about setting it to size:

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

Then in your update() method, $scope.item will be set to the currently selected item.

And whatever code needed item.size.code, can get that property via $scope.item.code.

Fiddle.

Update based on more info in comments:

Use some other $scope property for your select ng-model then:

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

Controller:

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}
7
  • 1
    If I set my model as item, how do I preselect a value?
    – Patrick
    Jan 17, 2013 at 19:57
  • 5
    Put this inside your <select>: ng-init="item=sizes[0]" Jan 17, 2013 at 19:59
  • Thank you very much for your help, but I don't think I have shared enough of the situation. item is a object that is created page load. the sizes array of objects comes in on user interaction with an edit button, so if I do this it will override the entire item object. I need a way to create a bunch of options in a select box that preselects a value from a completely separate part of the data object.
    – Patrick
    Jan 17, 2013 at 20:50
  • 15
    Is this true? It seems that ng-change handler is fired before the ng-model is updated, so trying $scope.item.size.code = $scope.selectedItem.code might not always give you the updated model value. Has anyone seen that when using ng-change?
    – Karl
    Aug 4, 2014 at 19:38
  • 7
    Guess there's nothing stopping you from doing this either: ng-model="selectedItem" ng-change="update(selectedItem)" Nov 14, 2014 at 3:26
47

You can also directly get selected value using following code

 <select ng-options='t.name for t in templates'
                  ng-change='selectedTemplate(t.url)'></select>

script.js

 $scope.selectedTemplate = function(pTemplate) {
    //Your logic
    alert('Template Url is : '+pTemplate);
}
10
  • 5
    This answer the question while the accepted one gives an alternative
    – redben
    Oct 6, 2013 at 13:43
  • 1
    where do you initialize or get template variable? Mar 19, 2014 at 3:11
  • 29
    Does this work without specifying a model? I get this error: Controller 'ngModel', required by directive 'select', can't be found!
    – fer
    Mar 29, 2014 at 10:30
  • 8
    ngModel is definitely required for select elements, according to the documentation. The other directives are optional, but that one is not.
    – mnemia
    Aug 27, 2014 at 21:57
  • 38
    This does not work! ng-change does not have access to temporary variable (t) created inside ng-options.
    – Garbage
    Mar 6, 2017 at 17:43
16

you also coud try this:

<select  ng-model="selectedItem" ng-change="update()">
   <option ng-repeat="item in items" 
         ng-selected="selectedItem == item.Id" value="{{item.Id}}">
      {{item.Name}}
   </option>
</select>
1
  • 2
    This solution is good if you need to format the value. Using just the Select approach I couldn't format the value easily.
    – mbokil
    Apr 7, 2016 at 15:53
8

If Divyesh Rupawala's answer doesn't work (passing the current item as the parameter), then please see the onChanged() function in this Plunker. It's using this:

http://plnkr.co/edit/B5TDQJ

2
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>
2
  • 11
    Use ng-options instead of ng-repeat in a select. Jun 16, 2014 at 20:27
  • 13
    @JepserBernardino sometime you need finer access to <option>, e.g. to style some special/default options regardless whether they are selected or not
    – Ekus
    Dec 30, 2014 at 18:51
2

//Javascript
$scope.update = function () {
    $scope.myItem;
    alert('Hello');
}
<!--HTML-->
<div class="form-group">
     <select name="name"
             id="id" 
             ng-model="myItem" 
             ng-options="size as size.name for size in sizes"
             class="form-control" 
             ng-change="update()"
             multiple
             required>
     </select>
</div>

İf you want to write, name, id, class, multiple, required , You can write in this way.

1

This might give you some ideas

.NET C# View Model

public class DepartmentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

.NET C# Web Api Controller

public class DepartmentController : BaseApiController
{
    [HttpGet]
    public HttpResponseMessage Get()
    {
        var sms = Ctx.Departments;

        var vms = new List<DepartmentViewModel>();

        foreach (var sm in sms)
        {
            var vm = new DepartmentViewModel()
            {
                Id = sm.Id,
                Name = sm.DepartmentName
            };
            vms.Add(vm);
        }

        return Request.CreateResponse(HttpStatusCode.OK, vms);
    }

}

Angular Controller:

$http.get('/api/department').then(
    function (response) {
        $scope.departments = response.data;
    },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
   function (response) {
       $scope.request = response.data;
       $scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
   },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

Angular Template:

<div class="form-group">
    <label>Department</label>
    <div class="left-inner-addon">
        <i class="glyphicon glyphicon-hand-up"></i>
        <select ng-model="travelerDepartment"
                ng-options="department.Name for department in departments track by department.Id"
                ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
                ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>
1

You need to use "track by" so that the objects can be compared correctly. Otherwise Angular will use the native js way of comparing objects.

So your example code would change to -

    <select ng-options="size.code as size.name
 for size in sizes track by size.code" 
ng-model="item.size.code"></select>
1

AngularJS's Filter worked out for me.

Assuming the code/id is unique, we can filter out that particular object with AngularJS's filter and work with the selected objects properties. Considering the example above:

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>

<!-- OUTSIDE THE SELECT BOX -->

<h1 ng-repeat="size in sizes | filter:search:true"
    ng-init="search.code = item.size.code">
  {{size.name}}
</h1>

Now, there are 3 important aspects to this:

  1. ng-init="search.code = item.size.code" - on initializing h1 element outside select box, set the filter query to the selected option.

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" - when you change the select input, we'll run one more line which will set the "search" query to the currently selected item.size.code.

  3. filter:search:true - Pass true to filter to enable strict matching.

That's it. If the size.code is uniqueID, we'll have only one h1 element with the text of size.name.

I've tested this in my project and it works.

Good Luck

1

This is the cleanest way to get a value from an angular select options list (other than The Id or Text). Assuming you have a Product Select like this on your page :

<select ng-model="data.ProductId"
        ng-options="product.Id as product.Name for product in productsList"
        ng-change="onSelectChange()">
</select>

Then in Your Controller set the callback function like so:

    $scope.onSelectChange = function () {
        var filteredData = $scope.productsList.filter(function (response) {
            return response.Id === $scope.data.ProductId;
        })
        console.log(filteredData[0].ProductColor);
    }

Simply Explained: Since the ng-change event does not recognize the option items in the select, we are using the ngModel to filter out the selected Item from the options list loaded in the controller.

Furthermore, since the event is fired before the ngModel is really updated, you might get undesirable results, So a better way would be to add a timeout :

        $scope.onSelectChange = function () {
            $timeout(function () {
            var filteredData = $scope.productsList.filter(function (response) {
                return response.Id === $scope.data.ProductId;
            })
            console.log(filteredData[0].ProductColor);
            }, 100);
        };

Not the answer you're looking for? Browse other questions tagged or ask your own question.