Question

将vm.woExtend.ProgressNote设置为选定文本的正确方法是什么？

如何在ng-change中获取对所选选项的引用

当我选择option1时，我想将vm.woExtend.ProgressNote设置为＆＃34; Option1 Text＆＃34;

<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 1

在你的控制器中有一个像这样的对象：

 vm.ProgressNote = {"1": "Option1 Text", "2": "Option2 Text"};

然后它变得微不足道了：

 ng-change="vm.woExtend.ProgressNote = vm.ProgressNote[vm.woExtend.Reason]"

即便如此，我可能不会在ng-change事件中执行此操作，而是在控制器内监视vm.woExtend.Reason。

Answer 2

您可以在控制器上定义选项列表时实现此目的，这样您就可以为进度记录属性分配值（例如vm.woExtend.ProgressNote = vm.woExtend.Reason.text）。

以下代码段实现了所描述的解决方案。

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>

Answer 3

您可以使用ngOptions（https://docs.angularjs.org/api/ng/directive/ngOptions）

吗？

在您的情况下，您将通过控制器创建一个对象：

$scope.mySelect={}
$scope.myOptions=[
    {value=1, label='Option 1 Text'},
    {value=2, label='Option 2 Text'},
    {value=3, label='Option 3 Text'}
]

然后在你的HTML中有：

<select ng-model="mySelect" ng-options="option.label for option in myOptions">
</select>

完成选择后，您可以通过以下方式获取文本：

var text=$scope.mySelect.label

如何处理选择ng-change以获取所选选项的文本？

3 个答案: