3

チェックボックスが存在するng-clickの非表示チェックボックスをチェックする機能が正常に作成されました。 -繰り返す。ただし、ng-changeディレクティブを使用してチェックボックスをオンにすると、そのアイテムを別の配列に追加する機能もあります。TRエレメントは、ng-clickでチェックボックスをトリガーしますが、チェックボックスの変更は有効になりません。

要素を非表示にしてチェックボックスを直接チェックすると、コードが正常に動作しますが、TR上でng-clickディレクティブを使用すると、チェックボックスがオンになりますが、配列は更新されません。もう一度クリックするとチェックされたままになり、項目が新しい配列に追加されます。

これは、ng-clickが2回のクリックで発生する問題ではありません。

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

答えて

1

、私は入力のNG-クリック機能があるため、NG-クリック機能を登録していないことがわかりましたtr要素は実際には入力上のクリックイベントをエミュレートしていません。ダイナミックIDを追加し、ng-click関数をjavacript関数の

に置き換えました。
getElementById('checkboxID').click(); 

期待どおりに機能しました。

関連する問題