0

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

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

2 Answers 2

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.

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

Comments

1

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.