Javascript Angular js未对已选中的复选框触发更改事件_Javascript_Jquery_Angularjs_Angularjs Ng Change

Javascript Angular js未对已选中的复选框触发更改事件

javascript jquery angularjs

Javascript Angular js未对已选中的复选框触发更改事件,javascript,jquery,angularjs,angularjs-ng-change,Javascript,Jquery,Angularjs,Angularjs Ng Change,请看看这个。我从最初检查过的支票盒上的angular on change事件中得到了这种奇怪的行为。我也使用jquery检查了这一点。jquery事件正确激发，而angular事件仅在最初未选中复选框时激发以下是我的完整代码，顺便说一句： <html ng-app="testing"> <head> <title>Angular ng-change test</title> </head> <body> &

请看看这个。我从最初检查过的支票盒上的angular on change事件中得到了这种奇怪的行为。我也使用jquery检查了这一点。jquery事件正确激发，而angular事件仅在最初未选中复选框时激发

以下是我的完整代码，顺便说一句：

<html ng-app="testing">
<head>
    <title>Angular ng-change test</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <div class="row" ng-controller="ChgCtrl">
        <div class="col-md-12">
            <form>
                <div class="form-group">
                    <span class="text-info">ng-change</span>
                    <input type="checkbox" ng-model="formElem.checkbox" ng-change="toggleChange(formElem.checkbox)" ng-checked="formElem.checkbox == 1"/>
                </div>
            </form>
        </div>
        <div class="col-md-12">            
            <div class="col-md-6">
                <h3>JQuery change event:</h3>
                <P id="jq-messages"></p>
            </div>        
            <div class="col-md-6">                    
                <h3>Angular change event:</h3>
                <p>{{message_change}}</p>
            </div>
            <p class="text-danger">Please note the first click on checkbox.</p>
        </div>
    </div>
    <script type="text/javascript">
        var app = angular.module('testing', []);
        app.controller('ChgCtrl', function ($scope) {
            $scope.formElem = {
                checkbox: 1
            };
            $scope.message_change = '';

            $scope.toggleChange = function (data) {
                $scope.message_change = data === true ? 'Checked' : 'Unchecked';
                console.info(data === true ? 'Checked' : 'Unchecked');
            };
        });

        $(function () {
            $('input[type=checkbox]').on('change', function (e) {
                $('#jq-messages').html($(this).is(':checked') ? 'Checked' : 'Unchecked');
                console.log($(this).is(':checked'));
            });
        });
    </script>
</body>


角位移变化试验
零钱
JQuery更改事件：

角度变化事件：
{{message_change}}
请注意第一次点击复选框
var app=角度模块（'测试'，[]）；
应用控制器（'ChgCtrl'，功能（$scope）{
$scope.formElem={
复选框：1
};
$scope.message_change=''；
$scope.toggleChange=函数（数据）{
$scope.message_change=data==true？'Checked'：'Unchecked'；
console.info（数据==true？'Checked'：'Unchecked'）；
};
});
$（函数（）{
$（'input[type=checkbox]'）。关于（'change'，函数（e）{
$（'#jq messages'）.html（$（this）.is（':checked'）？'checked'：'Unchecked'）；
log（$（this）.is（':checked'）；
});
});

删除了

ng checked

属性，更改了

$scope.formElem.checkbox的类型，更正了if语句（$scope.formElem.checkbox？'checked'：'Unchecked'）


var-app=angular.module（'testing'，[]）；
应用控制器（'ChgCtrl'，功能（$scope）{
$scope.formElem={
复选框：true
};
$scope.message_change=''；
$scope.toggleChange=函数（数据）{
$scope.message_change=（$scope.formElem.checkbox？'Checked'：'Unchecked'）；
console.info（数据==true？'Checked'：'Unchecked'）；
};
});
$（函数（）{
$（'input[type=checkbox]'）。关于（'change'，函数（e）{
$（'#jq messages'）.html（$（this）.is（':checked'）？'checked'：'Unchecked'）；
log（$（this）.is（':checked'）；
});
});

零钱
JQuery更改事件：

角度变化事件：
{{message_change}}
请注意第一次点击复选框
您可以使用纯角度-不需要jQuery
删除您的ng更改
和ng已选中
属性，只需使用ng model
：
<input type="checkbox" ng-model="formElem.checkbox"/>

我的建议是不要使用Jquery，而是使用所有AngularJ。同样在控制器中，如果要查看更改，请使用$scope.$watch。
她是。
你的解决方案确实有效。非常感谢。我的方法的问题是我使用了ng checked属性？如果是这样的话，我不应该使用它吗？您已经有了ng model
属性，它是一个绑定，并且足够聪明，ng checked
仅为1个方向，它将显示是否选中了值，但不会将其绑定到范围的2个方向，这是有意义的。谢谢。另外，大多数ng属性的命名都很巧妙（但也有一些例外），所以ng checked
就像这是选中的还是未选中的
，只需回答，但如果它的名称为ng check，这对于绑定来说很有意义，只需注意那些小提示您不应该在ng模型中使用ng checked指令，
<p ng-show="formElem.checkbox">checked!</p>
<p ng-show="!formElem.checkbox">not checked.</p>