angularjs - TR 元素通过 ng-click 触发复选框,但复选框上的 ng-change 不会触发

标签 angularjs checkbox angularjs-ng-click angularjs-ng-change

我已经成功地创建了一个功能来检查一个隐藏的复选框,该复选框存在于用 ng-repeat 生成的复选框所在的行的 ng-click 中。但是,我还具有在使用 ng-change 指令选中复选框时将该项目添加到单独数组的功能。

如果我取消隐藏元素并直接选中复选框,我的代码将完美运行,但如果我在 TR 上使用 ng-click 指令,复选框会被选中(明显),但数组不会更新。如果我再次单击它,它将保持选中状态并且该项目将添加到新数组中。

这不是 ng-click 需要两次点击才能触发的问题。这是我的标记:

<tr ng-cloak ng-repeat="item in mostRecent | orderBy:sortType:sortReverse | filter: query" class="hovered" ng-class="{'hide':showReports && item.status == 'Not Started' || showReports && item.status == 'inProgress','rep-checked': bool}" ng-click="bool = !bool">
        <td class="hidden"><div class="checkbox">
            <label class="checkbox">
              <input type="checkbox" ng-change="sync(bool, item)" ng-model="bool" ng-checked="isChecked(item)">
            </label>
          </div></td>

和 js:

$scope.isChecked = function(id) {
          var match = false;
          for(var i=0 ; i < $scope.selectionData.length; i++) {
              if($scope.selectionData[i].id == id){
                match = true;
              }
          }
          return match;
};

// Create a new array from the selected data
$scope.selectionData = [];

var selectionData = $scope.selectionData;
var result = selectionData.filter(function(e){ return e.id == id; });

$scope.sync = function(bool, item){
                if ($scope.selectionData) {
                  $scope.selectionData.push(item);
                }
                else {
                  $scope.selectionData.splice(item);
                }
                    console.log('check' + $scope.selectionData);
};

最佳答案

经过更深入的研究,我发现输入上的 ng-click 函数没有注册,因为 tr 元素的 ng-click 函数实际上并没有模拟输入上的点击事件。我添加了一个动态 ID,并将 ng-click 函数替换为

的 javascript 函数
getElementById('checkboxID').click();

它按预期工作。

关于angularjs - TR 元素通过 ng-click 触发复选框,但复选框上的 ng-change 不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37173775/

相关文章:

Python 类成员与实例成员不同

javascript - 从一组具有相同类名的复选框中获取当前复选框的值

javascript - 如何以嵌套方式将预定义指令 (ng-click) 与自定义指令结合使用?

javascript - AngularJS 指令不起作用

AngularJS:带有自定义 ng-options 的下拉指令

javascript - Typescript 编译排序问题 gulp-typescript, tsc 1.6

c# - 以编程方式检查控件时如何防止触发 CheckedChanged 事件?

javascript - Angular 1.4 - 如何将 ng-click 项目的逻辑从模板移动到 Controller ?

angularjs - ng-click执行属于不同 Controller 的2个方法

javascript - Angular $route.reload() 完成时触发事件