angularjs get only selected checkbox

Question

i want to get the selected checkboxes in my loop, for that check box i have to retrive the amount field onclick.

Here is my HTML script :

<div ng-repeat="$item in items">
    Amount  :<input ng-model="$item.daily_data.payment_amount">
    Check  : <input type=checkbox ng-model="checkAmount[$item.daily_data.id]" ng-value="$item.id" >
</div>

<input type="button" ng-click="checkNow()" />

The below script showing all check boxes . i want the only selected one.

JS Script :

$scope.checkAmount = {};
$scope.checkNow(){
console.log($scope.checkAmount);
}

Updated the question, hope you can see the modification. any solution.? — Snopzer
– Snopzer, Commented Aug 6, 2016 at 20:59

developer033 · Accepted Answer · 2016-08-06 21:10:07Z

3

First of all to use functions with $scope you should do something like this:

$scope.checkNow = function() {
  ...
}

or

$scope.checkNow = checkNow;

function checkNow() {
  ...
}

About your problem:

You could bind the checkboxes to a property (something like checked), so you can have the items that are checked easily in your controller.

Then, to calculate the total of all checked amount , I' suggest you to use Array.prototype.filter() + Array.prototype.reduce().

Here's a demo based on your original code:

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

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

  function MainCtrl($scope) {
    $scope.checkNow = checkNow;
    $scope.checkAmount = {};
    $scope.items = [
      {
        "id": 1
      }, 
      {
        "id": 2
      },
      {
        "id": 3
      }
    ];

    function checkNow() {
      $scope.total = $scope.items.filter(function(value) {
        return value.checked;
      }).reduce(function(a, b) {
        return a + b.amount;
      }, 0);
    }
  }
})();

<!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">
  <div ng-repeat="$item in items">
    <label>
      Amount: <input type="number" ng-model="$item.amount">
    </label>
    <label>
      Check: <input type=checkbox ng-model="$item.checked">
    </label>
  </div>

  <button type="button" ng-click="checkNow()">Check now</button>
  <hr>
  <label for="total">Total</label>
  <input type="number" id="total" disabled ng-model="total">
</body>

</html>

edited Aug 6, 2016 at 21:10

answered Aug 6, 2016 at 21:01

developer033

25k8 gold badges85 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Snopzer Over a year ago

if My Amount and id at this Level the $item.daily_data.payment_amount.

developer033 Over a year ago

I didn't understand.. can you please elaborate?

Snopzer Over a year ago

Sure, i will do that. give me a minute please.

Snopzer Over a year ago

i did changes the amount and id field model. which are used in my application. can you please do the same changes in your Answer.

Snopzer Over a year ago

Thanks For your Time. Your Solution is Really Helpful.

|

Collectives™ on Stack Overflow

angularjs get only selected checkbox

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related