on-change 和 ng-change 的区别

Nea*_*alR 4 javascript data-binding events angularjs angularjs-directive

下面是一个非常简单的表单下拉列表设置。但是,该on-change事件拒绝触发...除非它更改为ng-change.

这让我卡住了大约一个小时,因为我们在我们网站的其他地方使用相同的设置(即模型属性/列表/on-change指令)没有失败。

我想知道的区别是什么之间on-change以及ng-change为什么在这种情况下一个工作和其他不?

看法

<select id="grArchive"
        name="grArchive"
        class="form-control"
        options="userList"
        ng-model="selectedUser"
        ng-options="user as user.name for user in userList"
        on-change="showSelected()">
</select> 
Run Code Online (Sandbox Code Playgroud)

控制器

scope.selectedUser = {};
scope.userList = [];

scope.showSelected = function(){
    scope.columns = addColumns;
};

var loadUserList = function(data){
    scope.userList = $.map(data, function(item){
            return {id: item.id, name: item.firstName + ' ' + item.lastName};
        });
}
Run Code Online (Sandbox Code Playgroud)

以防万一:用户下拉按预期填充(下面的屏幕截图)

在此处输入图片说明

Pan*_*kar 5

ng-change

ng-change是当在发生任何变化由角核心API在内部寄存器的表达提供了一种指令,被调用$viewValueng-model变量(这里是代码); 为其分配一个表达式,例如myFunction(). 提供的表达式将在底层控制器范围内计算。调用表达式后,它会运行一个摘要循环以确保在视图上更新绑定。此外ng-change还有用于活动,如其他指令ng-focusng-mousedownng-submitng-blur,等在这里就是这样的指令列表

变化中

它是一种change对输入元素值调用 JavaScript 函数的方法。它将function在上下文中搜索全局可用的(显然它不会调用在 angular 控制器中注册的函数)并评估它。