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);
    }
 });
 }
};
});

由于某种原因，角度不喜欢这个。检查？不知道从哪里开始。

the plunkr

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

Answer 1

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

按钮元素没有此类属性。

我会在button元素中添加一个类。并在此基础上设置复选框的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

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

1 个答案: