CODEWITHSUNDEEP
javascriptangularjsangularjs-controllerangular-ngmodel
zok
zok

Reputation: 7902

AngularJS model of select returns undefined

I'm trying to retrieve the value of the current option of a select, but it returns me undefined (I expect it to return me an object).

Markup:

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedLocal" ng-options="item.Nome for item in locais" ng-change="localSelectChange()">
        <option value="">Locais</option>
    </select>
</div>

Controller:

function MyCtrl($scope) {
    $scope.locais = [{
        ID: 109,
        Nome: 'Aeroporto Internacional Hercilio Luz'
    }, {
        ID: 161,
        Nome: 'Koxixos'
    }, {
        ID: 184,
        Nome: 'Praça XV de Novembro'
    }];

    $scope.localSelectChange = function() {
        alert('$scope.selectedLocal: ' + $scope.selectedLocal); // returns undefined
    }
}

The curious part is I created this jsfiddle to reproduce the problem, with the EXACT same code, and it works.

Update:

I created a plunkr here where I replicate the issue.

The first select is wrapped on a div with its own controller "MyCtrl", and it works as expected, as I'm able to retrieve the model from the ng-change event handler function.

The second select "belongs" to the DashCtrl, the whole Dash tab view controller. When I try to retrieve the model from the ng-change event handler function it returns me undefined. Why is that?

Upvotes: 2

Views: 8203

Answers (3)

Sushil Kumar
Sushil Kumar

Reputation: 1537

I was facing the same issue, Try using "track by" in ng-options

<div ng-app ng-controller="MyCtrl">
    <select ng-model="selectedLocal" ng-options="item.Nome for item in locais track by item.ID" ng-change="localSelectChange()">
        <option value="">Locais</option>
    </select>
</div>

Upvotes: 0

Nuno L&#243; Ferreira
Nuno L&#243; Ferreira

Reputation: 131

Try to change "$scope.selectedLocal.Nome" to "this.selectedLocal.Nome";

I had similar bugs when i try to use includes inside controllers... seams Scope is lost.

Upvotes: 13

Tiago Barreto
Tiago Barreto

Reputation: 822

You need the declared object value. 

    $scope.localSelectChange = function() {
            alert('$scope.selectedLocal: ' + $scope.selectedLocal.Nome);
    }

See the JSFiddle

Upvotes: 0

Related Questions