How to collect data for the rows that have been selected in AngularJS?

Ashish Agrawal

I am receiving a list of data from server and has displayed that in table format using ng-repeat along with checkbox in each row. My requirement is to pass the selected rows back to server upon clicking a removeUserData button. Am facing issue to get it done, help would be appreciated.

<table border="2" border-color=black>
       <tr data-ng-repeat="user in users">
            <td><input type="checkbox"></td><td>{{user.id}}</td><td>{{user.country}}</td><td>{{user.name}}</td>             
       </tr>
</table><br>
<button data-ng-click="removeUserData()" data-ng-show="users.length">Remove User</button>

developer033

I'd suggest you to make use of a new property in users, something like removed, then when checkbox is checked it will be true, otherwise false.

See it working:

(function() {
  angular
    .module("app", [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.removeUserData = removeUserData;

    $scope.users = [  
       {  
          "id":1,
          "country":"Italy",
          "name":"Pavarotti"
       },
       {  
          "id":2,
          "country":"French",
          "name":"Some user"
       }
    ];

    function removeUserData() {
      $scope.users = $scope.users.filter(function(user) {
        return !user.removed;
      })
    }
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>

<body ng-controller="MainCtrl">
  <table>
    <tr ng-repeat="user in users">
      <td>
        <input type="checkbox" ng-model="user.removed">
      </td>
      <td ng-bind="user.id"></td>
      <td ng-bind="user.country"></td>
      <td ng-bind="user.name"></td>
    </tr>
  </table>
  <div ng-if="users.length">
    <hr>
    <button ng-click="removeUserData()">Remove User</button>
  </div>

</body>

</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.