up vote -1 down vote favorite

I am trying to select a dropdown value in angularJs and save it in a service so that i can use it on another view to display the user his selected value and full dropdown.But when i try to log the selected value inside controller.I am getting value of undefined.Please help me how to proceed.

<td>
  <select name="systems" class="pulldown1" id="systems" ng-model="system.selectedOption" ng-controller="EurexController" required ng-options="option.name for option in system.availableOptions track by option.id" ng-init="system.selectedOption=system.availableOptions[0]" ng-change="changed()"> </select>
</td>

Controller code:

$scope.system = {
  availableOptions: [{
    id: 'Domestic 1',
    name: 'Domestic 1'
  }, {
    id: 'Domestic 2',
    name: 'Domestic 2'
  }, {
    id: 'Global',
    name: 'Global'
  }, {
    id: 'Far East',
    name: 'Far East'
  }],
  // selectedOption: {id: 'Domestic 1', name: 'Domestic 1'} //This sets the default value of the select in the ui
};

I also tried using selectedoption mentioned in AngularJS website.But still couldnt do it.

console.log($scope.system.selectedOption);
console.log(systems);
share
    
This is a Valid Question and I got my answer . Could someone say why is this downvoted ? – Praveen Nov 20 '16 at 4:45
up vote 0 down vote

It's better to put your ng-controller attribute on a container element instead of directly on the something like a <select> element. This allows you to use the controller throughout your view instead of limiting it to the <select> element. Your console.log(systems); is undefined because systems does not exist in the controller context. Avoid using ng-init unless you really need it as described in the docs. Here is a working example using a modified version of the code you provided:

angular.module('app', [])
  .controller('ctrl', function($scope, myService) {
    $scope.system = {
      availableOptions: [{
        id: 'Domestic 1',
        name: 'Domestic 1'
      }, {
        id: 'Domestic 2',
        name: 'Domestic 2'
      }, {
        id: 'Global',
        name: 'Global'
      }, {
        id: 'Far East',
        name: 'Far East'
      }]
    };

    $scope.system.selectedOption = {};
    // uncomment the following line if you want to set a default selection
    //$scope.system.selectedOption = $scope.system.availableOptions[0];

    $scope.optionChanged = function() {
      myService.optionValue = $scope.system.selectedOption;
      console.log($scope.system.selectedOption);
    }
  })
  .controller('ctrl2', function($scope, myService) {
    $scope.myService = myService;
  })
  .service('myService', function() {
    var _optionValue = {};
    return {
      get optionValue() {
          return _optionValue;
        },
        set optionValue(value) {
          _optionValue = value || {};
        }
    }
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <h2>ctrl</h2>
    <div>
      <select ng-model="system.selectedOption" ng-options="option as option.name for option in system.availableOptions" ng-change="optionChanged()">
        <option value="">Please select</option>
      </select>
    </div>
    <div>
      Selected option: {{ system.selectedOption | json }}
    </div>
  </div>
  <div ng-controller='ctrl2'>
    <h2>ctrl2</h2>
    <div>
      {{ myService.optionValue }}
    </div>
  </div>
</div>

share
    
Why i used ng-init was i always want the first item to be displayed on the dropdown . can you guide me on how should i write down a angular service/factory so that i can set the selected value on scope. The main idea of having the value in service/factory is because . I am taking the user to next page after the system is selected. There i need to show him again the system he is selected. kind of a redispaly page.If the user wants to see what he has selected. – Praveen Nov 20 '16 at 1:16
    
It's a bit out of the scope of your original question, but I have updated the answer to show how you could use a service with a getter/setter to share the selected option between two controllers. – Lex Nov 20 '16 at 1:25
    
Thanks a Lot. I upvoted it . But its saying me they will hide it coz i have less reputation – Praveen Nov 20 '16 at 1:30
    
Hey, Did You forgot to add the service code/guide. I am not able to see it – Praveen Nov 20 '16 at 1:30
    
Hey Lex. I am setting the deafult value inside the controller . whenever i do a onchange event the same controller will be getting called and wont the default value will be coming again inside the controller ? – Praveen Nov 22 '16 at 4:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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