用户从下拉列表框中选择选项后如何获取新的选定值和旧值？答案

【问题标题】：How to get new selected and old values after user selected option from dropdown list box?用户从下拉列表框中选择选项后如何获取新的选定值和旧值？
【发布时间】：2016-08-16 09:25:46
【问题描述】：

我有 angularjs 下拉列表框：

    <select class="form-control"
            ng-model="editor.frequency"
            ng-options="item as item.Name for item in editor.frequencies"
            ng-change="editor.editFrequencyManual = false;">
   </select>

用户点击下拉列表框中的选项后，我需要获取点击（选择）值和旧值（选择前）。

知道如何获得这两个值吗？我应该使用事件函数吗？

【问题讨论】：

标签： angularjs

【解决方案1】：

您可以观察模型的变化：

$scope.$watch('editor', function(newValue, oldValue){
    //
});

或者您可以修改ng-change，使其将旧值和新值作为参数传递：

    <select class="form-control"
            ng-model="editor.frequency"
            ng-options="item as item.Name for item in editor.frequencies"
            ng-change="changed(editor.frequency, {{editor.frequency}}); editor.editFrequencyManual = false;">
   </select>

当然，你应该把editor.editFrequencyManual = false;移到change函数中。

function myController($scope) {
  $scope.myModel = {};
  $scope.doThis = function(newValue, oldValue) {
    console.log("New value: " + newValue);
    console.log("Old value: " + oldValue);
  }
}

angular.module('myApp', []);
angular
  .module('myApp')
  .controller('myController', myController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
      <select ng-model="myModel" ng-change="doThis(myModel, '{{myModel}}');">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </div>
</div>

【讨论】：

谢谢你的回答。我觉得问你这个问题有点傻，但是，无论如何，这个'{{editor.frequency}}'的含义是什么。我的意思是当参数传入大括号？
@Michael 它会在创建 html 元素时插入该值，以便您获得一个静态字符串以传递给函数。
@Michael 您实际上不需要单引号，因为该值在传递给函数时已经被插值。我添加了一个 sn-p 来演示。