Question

这是我的代码，但$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>

Answer 1

ng-change不是处理更改事件的指令（我意识到这个名称令人困惑）。所以这是预期的。 Github source

如果您需要参加活动，可以改为使用ng-click：

<!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-click="alert($event)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>

Answer 2

ngMouse，ng-change不提供事件对象。但是你可以创建另一个变量并为其分配$ event。然后通过ng-change传递。这是我的建议

＆＃13;

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

＆＃13;

More details

Answer 3

事先捕获事件

如果您需要ng-change功能，但又想获得要更改的元素，则还可以使用ng-focus在更改之前捕获元素。

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;


    var CSV = 'sep=,' + '\r\n\n';

    if (ShowLabel) {
        var row = "";

        for (var index in arrData[0]) {

            row += index + ',';
        }

        row = row.slice(0, -1);

        CSV += row + '\r\n';
    }

    for (var i = 0; i < arrData.length; i++) {
        var row = "";

        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }

        row.slice(0, row.length - 1);

        CSV += row + '\r\n';
    }

    if (CSV == '') {        
        alert("Invalid data");
        return;
    }   

    var fileName = "MyReport_";
    fileName += ReportTitle.replace(/ /g,"_");   

    var uri = 'data:text/html;charset=ISO-8859-9,' + escape(CSV);


    var link = document.createElement("a");    
    link.href = uri;

    link.style = "visibility:hidden";
    link.download = fileName + ".csv";

    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

下面的扩展示例：

<select ... ng-focus="setFocus($event)" ng-change="alert()" ... />

Answer 4

您可以使用此示例：

<!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){
            let elmSelect = angular.element(e.target)[0];
            let options = elmSelect.options;
            let selectedOptionInnerHmtl = options[options.selectedIndex].innerHTML;
            // and so on ...
        }
    });
</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-click="e=$event"ng-change="alert(e)" ng-options="value for value in names">
    </select>
</div>
</body>

</html>

Answer 5

你不能，this answer取自快速谷歌搜索结果：

ng-change is not a directive for handling the change event
(I realize that this is confusing given the name), but is actually
instead notified when ngModelController.$setViewValue() is called
and the value changes (because ng-change adds a listener to the 
$viewChangeListeners collection). So this is as expected.

如何捕获ng-change的事件？

5 个答案: