javascript - Difference between on-change and ng-change - Stack Overflow

admin管理员组

文章数量:1287487

Below is a pretty straightforward setup for a form drop down list. However, the on-change event refuses to fire... unless it's changed to ng-change.

This had me stuck for about an hour, since we use the same setup elsewhere in our site (i.e. model property/list/on-change directive) without fail.

I'm wondering what the difference is between on-change and ng-change and why one works in this instance and the other doesn't?

View

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

Controller

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};
        });
}

Just in case: the user drop down populates as expected (screen shot below)

Below is a pretty straightforward setup for a form drop down list. However, the on-change event refuses to fire... unless it's changed to ng-change.

This had me stuck for about an hour, since we use the same setup elsewhere in our site (i.e. model property/list/on-change directive) without fail.

I'm wondering what the difference is between on-change and ng-change and why one works in this instance and the other doesn't?

View

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

Controller

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};
        });
}

Just in case: the user drop down populates as expected (screen shot below)

• javascript
• angularjs
• events
• data-binding
• angularjs-directive

Share Improve this question Follow edited Jul 14, 2016 at 16:16 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Jul 14, 2016 at 16:00 NealRNealR 10.7k6161 gold badges167167 silver badges306306 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

ng-change

ng-change is a directive provided by Angular core API which internally registers an expression to be called when any change happens in $viewValue of ng-model variable (here is the code); assign it an expression such as myFunction(). That provided expression will evaluate inside the underlying controller scope. After calling an expression it runs a digest cycle to make sure bindings are updated on the view. Besides ng-change there are other directives used for events, like ng-focus,ng-mousedown,ng-submit, ng-blur, etc. Here is a list of such directives

on-change

It is a way of calling a JavaScript function on change of input element value. It will search for the function which is globally available in context (obviously it will not call the function registered in angular controller) and evaluate it.

本文标签： javascriptDifference between onchange and ngchangeStack Overflow