Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

id as ng-model for select in angularjs

I am not getting the id value of the option value of selected item of tag.

<div ng-controller="UserCreationCtrl">
    <form novalidate="novalidate" class="form-horizontal">
        <div class="control-group">
            <label class="control-label" for="inputFirstName">First name:</label>

            <div class="controls">
                <input type="text" id="inputFirstName" ng-model="doctor.firstName" placeholder="First name"/>
            </div>
        </div>

        <div>
            <span  class="nullable">
                <select ng-model="user.lookupId" ng-options="select as speciality.lookupName for speciality in specialityList" ng-change="selectedSpecilaty()">
                    <option value="">-- choose speciality --</option>
                </select>
            </span>
        </div>
    </form>
</div>

My controller

app.controller('UserCreationCtrl', ['$scope', 
    function ($scope) {

    $scope.specialityList = [
                                 {lookupId : 1, lookupName: 'speciality1'},
                                 {lookupId : 2, lookupName: 'speciality2'},

                                 {lookupId : 4, lookupName: 'speciality6'},
                                 {lookupId : 3, lookupName: 'speciality3'}
                                 ];

    $scope.user = {firstName: 'first name value', lookupId : 4};

    $scope.selectedSpecilaty = function()
    {
        alert($scope.user.lookupId);
    }
}]);    

How can i do this. the alert box displying the value as 'undefined'.

like image 651
Praveen Reddy Avatar asked Sep 19 '14 14:09

Praveen Reddy


1 Answers

ng-options patterns can be confusing to get started with, as there are quite a bunch.

What you wrote right now means:

select     as     speciality.lookupName    for   speciality   in   specialityList
 ^-- the value to set to   ^-- what to display      ^-- iteree name  ^-- iterables

So the variables you have available in the expression are everythin you have defined on the scope, and the contextual specialty variable. When you select something it'll assign it to select, which is indeed undefined.

What you're looking for is

ng-options="speciality.lookupId as speciality.lookupName for speciality in specialityList"

This will set the value of what ng-model is pointing to to the contextual specialty's lookupId

like image 104
Philipp Gayret Avatar answered Nov 09 '22 03:11

Philipp Gayret