how to bind sum of string array values to $scope

Question

I am trying to bind the sum of selected checkboxes from a table. I am almost there but I cannot figure out what I am doing wrong. The picture shows 2 selected boxes

you see the result of my code. I am open to suggestions if there is a better way of going about this.

  $http.get('/api/Products/').success(function (data, status) { $scope.productList = data; });
    $scope.selection = [];
    $scope.OrderAmount = []
    $scope.myTotal = 0;
    $scope.toggleSelection = function toggleSelection(ProductId) {
        var idx = $scope.selection.indexOf(ProductId);
        if (idx > -1) {
            $scope.selection.splice(idx, 1);
        }
        else {
            $scope.selection.push(ProductId);
        }

        for (var i = 0; i < $scope.selection.length; i++) {
            var OrderProductId = $scope.selection[i]
            var data = Enumerable.From($scope.productList).Where("x => x.ProductId == '" + OrderProductId + "'").ToArray();

            $scope.OrderAmount.push(data[0].ProductPrice)

     // $scope.OrderAmount = ["8500", "8500"]

            for (var i = 0, len = $scope.OrderAmount.length; i < len; i++) {
                $scope.myTotal += $scope.OrderAmount[i][0];
            };
        };

        $scope.$watch('myTotal', function (value) {
            $scope.model.OrderAmount = value;
        });
    };

view

<table class="table">
    <th>Product</th>
    <th>Price</th>
    <tbody>
      <tr ng-repeat="model in products">
        <td>
           <div class="toggle-switch" data-ts-color="blue">
             <input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-checked="selection.indexOf(model.ProductId) > -1" ng-click="toggleSelection(model.ProductId)">
            <label for="{{model.ProductId}}" class="ts-helper"></label>
           </div>
        </td>
        <td>{{model.ProductName}}</td>
        <td>{{model.ProductPrice}}</td>
       </tr>
     </tbody>
   </table>

  <div class="form-group">
            <input type="text" ng-model="model.OrderAmount" class="form-control fg-input">
   </div>

UPDATE to first answer

Icycool · Accepted Answer · 2015-09-01 03:32:33Z

1

You are doing the data binding wrongly. The checked status should be bound using ng-model but not ng-checked. You can make this easy by using an attribute (in the example checked) inside model and then loop over products to calculate the sum.

<tr ng-repeat="model in products">
    <td>
       <div class="toggle-switch" data-ts-color="blue">
           <input id="{{model.ProductId}}" type="checkbox" hidden="hidden" ng-model="model.checked" ng-click="toggleSelection()">
           <label for="{{model.ProductId}}" class="ts-helper"></label>
       </div>
    </td>
    <td>{{model.ProductName}}</td>
    <td>{{model.ProductPrice}}</td>
</tr>

Controller:

$scope.toggleSelection = function() {
    var sum = 0;
    angular.forEach($scope.products, function(value){
        if (value.checked) sum += value.ProductPrice;
    });

    $scope.model.OrderAmount = sum;
}

answered Sep 1, 2015 at 3:32

Icycool

7,1991 gold badge27 silver badges33 bronze badges

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

2 Comments

texas697 Over a year ago

see added image. The 0 is being added to every ProductPrice and the result is not the sum, it is combing the numbers. thanks

Icycool Over a year ago

It's a common problem in javascript - the + does string concatenation instead of addition. To fix that just add Number() around the subject, in this case Number(value.ProductPrice)

Collectives™ on Stack Overflow

how to bind sum of string array values to $scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related