Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to capture the event of ng-change?

Here's my code, But the $event is undefined. Does anyone know how can I capture the event?

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">

    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            alert($event);
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select class="form-control input-sm" ng-model="fda" ng-change="alert($event)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>
like image 510
zjffdu Avatar asked May 03 '17 12:05

zjffdu


People also ask

How do you use NG on change?

The ng-change event is triggered at every change in the value. It will not wait until all changes are made, or when the input field loses focus. The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.

What is ngInit?

The ngInit directive allows you to evaluate an expression in the current scope. This directive can be abused to add unnecessary amounts of logic into your templates. There are only a few appropriate uses of ngInit : aliasing special properties of ngRepeat , as seen in the demo below.

Can we use filter in NG model?

The ng-repeat values can be filtered according to the ng-model in AngularJS by using the value of the input field as an expression in a filter. We can set the ng-model directive on an input field to filter ng-repeat values. The below illustrations describes the approach for the implementation.

What is the difference between Ng-click and Onclick?

Another significant difference between ng-click and onclick is the execution context. Code inside an onclick attribute executes against the global window object, while an expression inside of ng-click executes against a specific scope object, typically the scope object representing the model for the current controller.


1 Answers

ngMouse, ng-change does not provide an event object.

But my suggestion is to create another variable, assign $event to that, then pass it via ng-change.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myCtrl", function($scope) {
        $scope.alert = function ($event){
            alert($event);
        }
    });
</script>

<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
    <select 
        class="form-control input-sm" 
        ng-click="event = $event" 
        ng-model="fda" 
        ng-change="alert(event)" 
        ng-options="value for value in names">
    </select>
</div>
</body>

</html>

More details

like image 167
Ramesh Rajendran Avatar answered Sep 23 '22 14:09

Ramesh Rajendran