使用angular.element（document.querySelector（id））。attr（'checked'，true）更改複選框值時，模型值不會被反映出來。

Question

我有一個邏輯，就像我有四個複選框應該像現有的代碼一樣。邏輯正在工作。但我確實使用語法來檢查並取消選中。

angular.element(document.querySelector('#c_'+j)).attr('checked', true); 

angular.element(document.querySelector('#c_'+j)).attr('checked', false); 

這不會反映在各自的複選框元素的模型值中。正如你可以檢查附加的屏幕截圖。前三個框被檢查，但它顯示'真'，實際點擊元素休息仍然'假'。我需要更新的模型值。任何人都可以在此幫助！

這裏是工作示例https://plnkr.co/edit/zA5V9gc6jTpPq3pIuvC8?p=preview

Answer 1

可以更換

angular.element(document.querySelector('#c_'+j)).attr('checked', true); 

與

var index = 'c_'+j; 
$scope[index]= true 

和相同的工藝，使選擇它通過把false代替true

Answer 2

您應該使用$scope以實現雙向綁定。

所以，你的功能將變爲，

function rangeCal(arg, bool){ 
    var tmparray= []; 
    var selectedcheckbox; 
    for(var propt in arraymatrix){ 
     tmparray = arraymatrix[propt]; 
     for(var i=0; i <= tmparray.length; i++){ 
     if(month === tmparray[i]){ 
      selectedcheckbox = propt; 

      var a = 'c_'+selectedcheckbox; 
      $scope[a]= true 
      var gap = arg.split('_')[1]; 
      if(!bool){ 
      for(var j=propt; j<= gap; j++){ 

       var j = 'c_'+j; 
       $scope[j]= true 
      } 
      }else if(bool) { 
      for(var k=propt; k<= gap+1; k++){ 
       if(k > gap){ 
       var k = 'c_'+k; 
       $scope[k]= false 
       } 

       var j = 'c_'+j; 
       $scope[j]= true 
      } 
      } 
     } 
     } 
    } 

HERE IS THE WORKING PLUNKER

Answer 3

檢查這個片段中，希望這是你所期待的。它正在爲這兩項行動工作，檢查和取消選中。

function rangeCal(arg, bool){ 
    var tmparray= []; 
    var selectedcheckbox; 
    for(var propt in arraymatrix){ 
    tmparray = arraymatrix[propt]; 
    for(var i=0; i < tmparray.length; i++){ 
     if(month === tmparray[i]){ 
     selectedcheckbox = propt; 
      angular.element(document.querySelector('#c_'+selectedcheckbox)).attr('checked', true); 
     var gap = arg.split('_')[1]; 
     if(!bool){ 
      for(var j=propt; j<= gap; j++){ 
      var cb_id = "c_"+j; 
      $scope[cb_id] = true; 
      // angular.element(document.querySelector('#c_'+j)).attr('checked', true); 
      } 
     }else if(bool) { 
      for(var k=4; k>= gap; k--){ 
      var gap_id = "c_"+k; 
      $scope[gap_id] = false; 
      // angular.element(document.querySelector('#c_'+gap)).attr('checked', false); 
      } 
     } 
     } 
    } 
    } 
    setTimeout(function(){ 
    console.log($scope); 
    }, 2000); 
}