view raw
monstro monstro - 6 months ago 51
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>
<textarea ng-bind="vm.woExtend.ProgressNote"></textarea>


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=""></script>
<div ng-app="myApp" ng-controller="myController as vm">
    ng-options="option as option.text for (key, option) in vm.ReasonOptions"
    ng-change="vm.woExtend.ProgressNote = vm.woExtend.Reason.text">
  <textarea ng-bind="vm.woExtend.ProgressNote"></textarea>