从下拉列表中获取旧值和新值答案

【问题标题】：Get old value and new value from dropdown从下拉列表中获取旧值和新值
【发布时间】：2014-03-21 11:25:39
【问题描述】：

我试图简单地从下拉列表中获取以前的值和新选择的值。在此示例中，下拉列表中预先填充了分配给用户的当前组。

当下拉列表改变时，我希望能够返回旧值和新值。我已经可以获取旧值，但我不知道如何返回新值。

控制器代码：

// User Object
userAccess = [{"user_name":"dodsosr11",
                  "group_level":1,
                  "user_id":500,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"keatikj09",
                  "group_level":1,
                  "user_id":250,
                  "group_id":10,
                  "group_name":"Conferences_Admins"},
              {"user_name":"malinag10",
                  "group_level":1,
                  "user_id":492,
                  "group_id":10,
                  "group_name":"Conferences_Admins"}];

//Group Object
groupAccess = [{"group_name":"Conferences_Admins",
                   "id":10,
                   "level_id":1},
               {"group_name":"ticket_sales",
                   "id":59,
                   "level_id":3},
               {"group_name":"Web Developers",
                   "id":1,
                   "level_id":1}];


$scope.reassignUser = function(){
    var oldGroup = this.user.group_id;
    var newGroup = ?????

};

HTML：

<tr ng-repeat="user in userAccess">
    <td>{{ user.user_name}}</td>
    <td>
        <select ng-change="reassignUser()" 
                ng-model="user.group_name" 
                ng-options="g.group_name as g.group_name for g in groupAccess">
        </select>
    </td>
</tr>

我在这里使用下面第一个响应中提供的手表示例创建了一个小提琴。 http://jsfiddle.net/LHz9D/1/

【问题讨论】：

标签： angularjs ng-repeat ng-options

【解决方案1】：

这样试试

查看

<select ng-model="selected" ng-change="change(selected, {{selected}})">

$scope.change = function(newObj, oldObj){
   console.log(newObj);
   console.log(oldObj);
}

【讨论】：

...如果您更改为ng-change="change(selected, {{selected || 'null'}})"，如果最初未设置选择，则角度不会抱怨，因为未设置时，角度会尝试执行change(selected, )，这会导致js错误并停止代码执行
这是一个很好的解决方案，但我不明白它为什么会起作用。 {{}} 是否只是在对象更改发生之前传递文字？

【解决方案2】：

您可以使用 ng-click，因为点击发生在更改之前，您可以像这样注册旧值

<select ng-model="selected" ng-change="change(selected, oldValue)" ng-click="oldValue = selected">

在控制器中

$scope.change = function(newValue, oldValue){
    //do if's in case you use null or empty values
    if ( oldValue ) {
        //do something
    }   
    if ( newValue ) {
        //do something
    }
}

【讨论】：

这仅在使用单个输入/选择字段时有用
另外，您不应该使用ng-click，因为如果您选择输入文本而不是在输入字段内单击，则不会触发此事件。相反，您应该使用ng-focus!

【解决方案3】：

这样做：

$scope.$watch('user.group_name', function(newValue, oldValue){

});

再也不用ng-change了

【讨论】：

如果我在其中发出警报以显示 oldValue 和 newValue，则在呈现表格时会触发警报 - 但是当我实际更改下拉列表时它不会触发，尽管在其他地方我可以看到user.group_name 已更新。
@Photovor 这是因为你有 ng-repeat。然后你应该注意userAccess中的每个user
@Photovor 例如，$scope.$watch('user[0].group_name', ... 将监视第一个用户的 group_name 属性
如果我这样做，在表格呈现并显示第一个警报后，我会收到一个错误：错误：[$rootScope:inprog] errors.angularjs.org/1.2.10/$rootScope/inprog?p0=%24digest
我也不知道要看多少用户，因为它是完全可变的