javascript - 按钮选择和取消选择所有不起作用的复选框

Question

我的选择 ng-grid 中所有复选框的按钮工作正常。但是，我还想实现使用相同的按钮取消选择。

这是原始代码

app.directive('selectAll',function(){
  return{

    restrict: 'A',
    link: function(scope,element,attr){
     element.click(function() {
     $('.ngViewport.ng-scope input[type="checkbox"]').prop('checked', true);
   });
  }
 };
});

在进行了一些谷歌搜索并基于其他示例后我的尝试:

  app.directive('selectAll',function(){
return{

  restrict: 'A',
  link: function(scope,element,attr){

 element.click(function() {
    if (this.checked) {
     $('.ngViewport.ng-scope input[type="checkbox"]').prop('checked', true);
    }
    else{
    $('.ngViewport.ng-scope input[type="checkbox"]').prop('checked', false);
    }
 });
 }
};
});

由于某种原因，Angular 不喜欢 this.checked??不知道从这里去哪里。

笨蛋

http://plnkr.co/edit/zy653RrqHmBiRJ7xDHlV?p=preview

Answer 1

您正在检查按钮的 Checked 属性。

按钮元素没有这样的属性。

我会向按钮元素添加一个类。并在此基础上设置复选框的选中属性。这是使用 jQuery。

但是使用 Angular 你应该避免将 jQuery 作为最后的手段。相反，应该使用模型来保存当前状态的值。

element.click(function() {
     var $this = $(this),
         isChecked = false;

     if ($this.hasClass('checked')) {
        $this.removeClass('checked');
     } else {
        $this.addClass('checked');
        isChecked = true;
     }
     $('.ngViewport.ng-scope input[type="checkbox"]').prop('checked', isChecked);
});

<强> Check Edited plunker