如何在angular js中使用http.post檢索已檢查的數據表中的行？

Question

嗨，我有ID，名稱等數據表，並且在Angular JS中添加了復選框

例如

vm.dtColumns = [
                    DTColumnBuilder.newColumn(null).withTitle(titleHtml).notSortable()
                    .renderWith(function(data, type, full, meta) {
                        vm.selected[full.ID] = false;
                        return '<input type="checkbox" class="checkedtestids" ng-model="showCase.selected[' + data.ID + ']" ng-click="showCase.toggleOne(showCase.selected)">';
                    }),

我有可以從標題中選擇所有行或單獨選擇所有行的復選框。

我還得到了一個保留ID的變量，並根據是否選中復選框將布爾狀態從true更改為false。

var vm = this;
    vm.message = '';
    vm.someClickHandler = someClickHandler;
    vm.selected = {};
    vm.selectAll = false;
    vm.toggleAll = toggleAll;
    vm.toggleOne = toggleOne;

我的html代碼顯示此vm.selected = {}; 如下：

<div ng-controller="WithAjaxCtrl as showCase">

            <blockquote>Please click on a row</blockquote>
            <p class="text-danger">
                You clicked on: <strong>{{ showCase.message }}</strong>
            </p>

            <table datatable="" dt-options="showCase.dtOptions"
                dt-columns="showCase.dtColumns" class="row-border hover"></table>


            <p class="text-danger">You selected the following rows:</p>
            <p>**<pre ng-model="showCase.selected">{{ showCase.selected |json }}</pre**>

如果我單擊這些ID，請在此處輸入圖片描述

然后，下面將反映以下內容： 在此處輸入圖像描述

{
  "2457937718692": true,
  "2457985718634": false,
  "2454757950532": true,

我如何將該數組vm.selected指示是否已選中發送到我的java spring控制器，然后將其用於其他目的？ 我嘗試使用$ http.post（）和$ http.get（）失敗。

Answer 1

您不需要在ng-model傳遞ID來標識選定的復選框，因為對象數組已綁定到視圖，而是可以傳遞boolean變量並使用filter指令https://docs.angularjs.org / guide / filter 。

例如。：

JAVASCRIPT

vm.data = ['a','b','c'];
var selected = [];
var vm.filterSelectedData = function(){
  selected = $filter('filter')(data, {checked: true});
}

的HTML

<div ng-repeat="element in showCase.data">
 <input type="checkbox" class="checkedtestids" ng-model="element.selected" ng-change="showCase.filterSelectedData()" />
</div>

要將選定的項目發送到服務器，您只需要使用這些選定項目的數組創建一個json對象。

http.post('url', {selectedItems:selected})
    .success(function(){ // calback function })
    .error(function(){ // error function })

見朋克

https://plnkr.co/edit/iJf7onwLUKckQDzBP2pT