CODEWITHSUNDEEP
angularjsarrays
Wayne Gilliver
Wayne Gilliver

Reputation: 135

Adding values from an angularjs drop menu

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

Upvotes: 0

Views: 61

Answers (2)

Appeiron
Appeiron

Reputation: 1061

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.

Upvotes: 1

Sajeetharan
Sajeetharan

Reputation: 222652

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>

Upvotes: 1

Related Questions