Adding values from an angularjs drop menu

Question

I am trying to add my $scope together, but having issues with it.

I am using

$scope.total = ($scope.list_category1.id || 0) + ($scope.list_category2.id || 0) + ($scope.list_category3.id || 0);

but I can't seem to add my values together until all the selects have got a value.

Please help

https://jsfiddle.net/wayneker/o9t6g7qg/8

there is a ng-change="calcTotals()" and a $scope.calcTotals = function(){ there, or am I missing something? — Wayne Gilliver
– Wayne Gilliver, Commented Oct 30, 2017 at 13:50

Appeiron · Accepted Answer · 2017-10-30 13:54:42Z

1

If you watch console closely, every time calcTotals() is executed, you get error Cannot read property 'id' of undefined as list_category1 expected to be an Object and id property is not found within it. You should create default values like zeros to make sure calcTotals() will successfully function:

   Object.assign($scope, {
       list_category1: '',
       list_category2: '',
       list_category3: ''
   });

Empty string are only for example as they are most easiest way to define default values for your... err... view model.

answered Oct 30, 2017 at 13:54

Appeiron

1,0617 silver badges14 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2017-10-30 13:51:58Z

You can directly call the calcTotals instead of total.

and change the function as,

 $scope.calcTotals = function(){
   return ($scope.list_category1.id || 0) + ($scope.list_category2.id || 0) + ($scope.list_category3.id || 0);
};

DEMO

var app = angular.module('app', []);

app.controller('Ctrl',function($scope) {  
    $scope.list_categories = {
       
       data: [
        {id: 1, name: 'name1'}, 
        {id: 2, name: 'name2'}, 
        {id: 3, name: 'name3'}, 
        {id: 4, name: 'name4'}
        ]
        
        
    };       
 

      $scope.total = 0;
      
      $scope.calcTotals = function(){
      
        return ($scope.list_category1.id || 0) + ($scope.list_category2.id || 0) + ($scope.list_category3.id || 0);
          
          };
          
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
    <select id="sel" class="input-block-level" ng-model="list_category1" ng-options="value.name for value in list_categories.data">  
        <option value="">Other</option>
    </select>{{list_category1.id}}<br>
    
     <select id="sel" ng-model="list_category2" ng-options="value.name for value in list_categories.data">    
        <option value="">Other</option>
     </select>{{list_category2.id}}<br>
     
     <select id="sel" ng-model="list_category3" ng-options="value.name for value in list_categories.data">    
        <option value="">Other</option>
     </select>{{list_category3.id}}<br>
   
  <br>
  <div>
    <b>All Points (from $scope total): {{calcTotals()}}</b><br><br>
    
    <b>All Points (by adding directly): {{list_category1.id + list_category2.id  + list_category3.id}}</b>
  </div>

</div>

Collectives™ on Stack Overflow

Adding values from an angularjs drop menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related