monstro monstro - 1 month ago 7
AngularJS Question

How to handle select ng-change to get selected option's text?

what is the proper way to set vm.woExtend.ProgressNote to selected text?

How to get a reference to the selected option in ng-change ??

When I select option1, I want to set vm.woExtend.ProgressNote to "Option1 Text"

<select ng-model="vm.woExtend.Reason" ng-change="vm.woExtend.ProgressNote='?????'">
<option value="1">Option1 Text</option>
<option value="2">Option3 Text</option>
<option value="3">Option4 Text</option>
</select>
<textarea ng-bind="vm.woExtend.ProgressNote"></textarea>

Answer

You can achieve this when you have the option list defined on your controller, so then you are able to assign a value to the progress note property (e.g. vm.woExtend.ProgressNote = vm.woExtend.Reason.text).

The following snippet implements the solution described.

angular.module('myApp', [])
  .controller('myController', function () {
    this.ReasonOptions = [
      { value: "1", text : "Option1 Text" },
      { value: "2", text : "Option3 Text" },
      { value: "3", text : "Option4 Text" }
    ];
   this.woExtend = {
    	Reason: 1,
    	ProgressNote: 'Blah bla bl!'
   };
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController as vm">
  <select
    ng-model="vm.woExtend.Reason"
    ng-options="option as option.text for (key, option) in vm.ReasonOptions"
    ng-change="vm.woExtend.ProgressNote = vm.woExtend.Reason.text">
  </select>
  <textarea ng-bind="vm.woExtend.ProgressNote"></textarea>
</div>