简体   繁体   中英

How to get selected checkboxes from table in multiple rows & columns and send as post response

I've an account statement table (mapped from response) with date and two other columns which has checkboxes.

View (HTML)

<table>
  <tr>
    <th>Statement Period</th>
    <th>Mail Address</th>
    <th>Email Address</th>
  </tr>
  <tr>
    <td>Oct 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Nov 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
  <tr>
    <td>Dec 2018</td>
    <td><input type="checkbox"></td>
    <td><input type="checkbox"></td>
  </tr>
</table>
<button ng-click="getSelectedData">Proceed</button<

Based on $index (array id), I want get selected checkbox(s) from each row and send as array like below JSON format;

Note: selected checkbox represents "Y" and other one represents "N"

JSON Array (Expected Response)

[
  {
    "isEmail": "Y",
    "isMail": "N",
    "month": "12",
    "year": "2018"
  },
  {
    "isEmail": "Y",
    "isMail": "N",
    "month": "10",
    "year": "2018"
  }
]

I want to send POST response like above format with couple of params (email address & physical address). I've tried a for loop, but seems luck runs out from this one.

Controller JS

$scope.sendStatementList = function(i) {
  var listLenght = $scope.accountStatementList.lenght;

  for (var i = 0; i < listLenght; i++) {
    var selectItem = $scope.accountStatementList[i];

    return selectItem;
  }

  console.log(selectItem);
};

I've tried multiple approaches, but still loss and no idea about right approach. Any help would be highly appreciated.

PS Here is plunker ( demo ) for my query.

Try this:

 https://next.plnkr.co/edit/6GLQtI85vPE0V98x

Just create another array mapped with your existing one:

 $scope.finalResponse = $scope.statementListRespone.map(function(st){
    return { 
      "month" : $filter('date')(st, "MM") , 
      "year" : $filter('date')(st, "yyyy"), 
      "isMail": "N", 
      "isEmail": "N"};
  });

And update your markup with binding to the other array, like:

<input type="checkbox" id="email-{{$index}}" name="email" ng-modal="email" 
    ng-model="finalResponse[$index]['isEmail']" 
    ng-true-value="'Y'" ng-false-value="'N'"> 

So, on button click: you can simply send your finalResponse array.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM