Get selected option in dynamic Angular dropdown

Question

I want have a simple select:

<ion-view view-title="fc" id="fcs">
  <ion-content>

    <div id="params-container">

        <select ng-model="value1" ng-options="value for value in params1 track by value" ng-change="update()"></select>

    </div>
  </ion-content>
</ion-view>

And in the controller:

angular.module('filedetails.controller', [])


.controller('FileDetailsCtrl', function($scope, $stateParams, FilesService, ProcessFileService, FCSModel) {

       $scope.params1 = ["FSC-A", "FSC-H", "FSC-W", "SSC-A"];

       $scope.update = function(){
            console.log('scope.axisX is');
            console.log($scope.axisX);
        }

});

And in app.js I have:

.state('file-detail', {
  url: '/files/:id',
  templateUrl: 'js/files/details/template.html',
  controller: 'FileDetailsCtrl'
})

I want to get the selected value but somehow when i select a value in the dropdown, it always outputs undefined. What can I be doing wrong? Im using AngularJS v1.3.13.

Tomislav · Answer 1 · 2015-08-05T22:04:43.317

0

You need to do it like this:

<select ng-model="axisX" ng-options="value as value for value in params1" ng-change="update()"></select>

or like this:

<select ng-model="axisX" ng-options="value for value in params1 track by value" ng-change="update()"></select>

With first approach you will get:

<option value="0">FSC-A</option>
<option value="1">FSC-H</option>

With second approach you will get:

 <option value="FSC-A">FSC-A</option>
    <option value="FSC-H">FSC-H</option>

Here is the working plunker

edited Aug 05 '15 at 22:04

answered Aug 05 '15 at 21:50

Tomislav

3,181
17
20

Thats still not working. I created a jsfiddle and it actually works as I have it. But somehow on my app, I get undefined, as if axisX is not part of scope. Yet params1 is part of the scope. This is very odd – Mark Aug 05 '15 at 22:01
Mark, did you wrap your select in correct ng-controller? – Tomislav Aug 05 '15 at 22:06
Im using Ionic and im new to it so a lot of that is taken out of my hands. But the fact params1 works on the scope means its in the correct controller right? – Mark Aug 05 '15 at 22:09
Yes you are correct. Can you share your html code inside that controller? – Tomislav Aug 05 '15 at 22:11
And just to be sure can you initiialize $scope.axisX in your controller? Put $scope.axisX='FSC-A'; in your controller code. – Tomislav Aug 05 '15 at 22:21
Actually i found the answer: http://stackoverflow.com/questions/23455718/why-is-my-ng-model-variable-undefined-in-controller – Mark Aug 05 '15 at 22:24
it has to do with child scope – Mark Aug 05 '15 at 22:26
Great. Nested scopes it is. Glad you found solution. – Tomislav Aug 05 '15 at 22:29

score 0 · Answer 2 · answered Aug 05 '15 at 22:05

I assume your setup is wrong. Your code works on jsfiddle, at least as soon as I add the ng-controller tag: https://jsfiddle.net/wg5dtb8o/

<div ng-controller="MyCtrl">
<select ng-options="value for value in params1" ng-model="axisX" ng-change="update()"></select>
</div>

Get selected option in dynamic Angular dropdown

2 Answers2