anglejsの下にjqueryコードを書く方法

Question

angularjsを使用してテーブルにselect/deselect all checkboxを作成する必要があります。私はそれを見つけたが、すべての解決策では、angularjsにarray and ng-repeatを使用している。私はこれらのソリューションbczを使用することはできません私はデータベースからレコードを取得し、各行にチェックボックスを備えたテーブルに印刷しています。

私はjqueryで解決策を得ましたが、それをangularjsに変換することは知られていません。 以下はjspのhtmlテーブルです。以下

 <thead> 
      <tr class="active"> 
       <th><input type="checkbox" id="selectall">Select_All</th> 
       <th>Product</th> 
      </tr> 
     </thead>  
     <tbody>    
      <% ParametersIterator it=res.getIterator(); 
        String prod=""; 
        int i=0;                   
        while(it.hasNext()) 
        { 
        Parameters p=it.next(); 
        prod=p.get("product"); 
        String id=p.get("id"); 
      %> 
      <tr> 
       <td> 
       <input type="checkbox" class="case" name="case" value="<%=id%>"> 
       </td> 
       <td><%=prod%></td> 
      </tr> 
      <%}%> 
     </tbody> 

<script language="javascript"> 
$(function(){ 

// add multiple select/deselect functionality 
$("#selectall").click(function() { 
     $('.case').attr('checked', this.checked); 
}); 

// if all checkbox are selected, check the selectall checkbox 
// and viceversa 
$(".case").click(function(){ 

    if($(".case").length == $(".case:checked").length) { 
     $("#selectall").attr("checked", "checked");alert("t"); 
    } else { 
     $("#selectall").removeAttr("checked");alert("f"); 
    } 

}); 
}); 
</script> 

Plsはここ

Answer 1

をangularjsへの変換に助けjqueryのコードである「サーバ/データベースからロードされたデータが取り込ま、チェックボックスを使用してテーブルを示すplunkerあります'、すべてのチェックボックスを選択/選択解除するボタンがあります。これにng-repeatを使わない理由はありません。

HTML：

<table> 
    <tr> 
    <th>Key</th> 
    <th>Value</th> 
    </tr> 
    <tr ng-repeat="row in data"> 
    <td>{{row.key}}</td> 
    <td><input type="checkbox" ng-model="row.value"></td> 
    </tr> 
</table> 
<button ng-click="applyValues(true)">Select all</button> 
<button ng-click="applyValues(false)">Unselect all</button> 

JS：シングル 'すべてを切り替え' ボタンで

$http.get('data.json') 
    .then(function(res) { 
    $scope.data = res.data; 
    }) 

$scope.applyValues = function(val) { 
    angular.forEach($scope.data, function(row) { 
    row.value = val; 
    }) 
} 

https://plnkr.co/edit/oaDnx1kM2Zl6mtZG5Eis?p=preview

バージョン：

https://plnkr.co/edit/jsQuACzGSlPBok1LEPLF?p=preview

Answer 2

Fissioが示唆した通りに$http.get('data.json')でデータを取得できれば、それは間違いなく道のりです。ただし、サーバー上でページをレンダリングする必要がある場合でも、それを実行することはできます。

ここにはng-repeatのないplunker exampleがあります。