How to show sum of multiple inputs with AngularJS ng-Model?

Question

This app allows user to enter the quantity of questions for specific topic inside a workbook. I’m trying to sum up all the questions and give an output of totalQuestions.

I created a function (findTotalQuestions().) that will run when Quantity input box is changed. I’m getting an error in Console: Cannot read property 'quantity' of undefined. I’m thinking its because $scope.skill.quantity is not being passed into function. How can I fix this?

<div class="input-field col m3" ng-model="totalQuestions">
   <medium>Total Questions in Workbook: </medium>{{totalQuestions}}
</div>

HTML

<table>
     <tr>
        <th> Skill </th>  
        <th> Quantity </th>
     </tr>
     <tr ng-repeat="skill in newWorkbook.skills">
         <td>
            { skill.topicText }}
         </td>
         <td>
              <p>
                <input id="quantity{{ skill.TopicId }}" type="number" class="validate" ng-model="skill.quantity" required="true" autocomplete="off" ng-change="findTotalQuestions()">
              </p>
         </td>
       </tr>
 </table>

Controller:

$scope.getProposedSkills = function() {
  return $http.get("/api/topics?SubjectId=" + $scope.newWorkbook.SubjectId).then(function(skills) {
    return $scope.newWorkbookskills = _.map(skills.data, function(skill) {
      var obj;
      obj = {
        TopicId: skill.id,
        quantity: 0,
        level: null,
        topicText: skill.topicText,
        startLevel: skill.startLevel,
        endLevel: skill.endLevel
      };
      return obj;
    });
  });
};

$scope.findTotalQuestions = function() {
  $scope.totalQuestions = 0;
  $scope.totalQuestions = $scope.totalQuestions + $scope.skill.quantity;
  return console.log($scope.totalQuestions);
};

Rishi Tiwari · Accepted Answer · 2016-06-28 16:05:22Z

2

Move your getProposedSkills() code in a service then in the controller set the $scope.skill like below

app.service('service',function($http){
    return {getProposedSkills:$http.get('your api url')};
})

Your controller should look like below

app.controller('ctrl',function($scope,$http,service){
   $scope.getProposedSkills = service.getProposedSkills().then(function(res){
       $scope.skill=res;
   })      

  $scope.findTotalQuestions = function() {
     $scope.totalQuestions = 0;
     $scope.totalQuestions = $scope.totalQuestions + $scope.skill.quantity;
     return console.log($scope.totalQuestions);
  }
})

edited Jun 28, 2016 at 16:05

answered Jun 28, 2016 at 15:59

Rishi Tiwari

1,0491 gold badge11 silver badges20 bronze badges

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

Comments

Alberto · Accepted Answer · 2016-06-28 16:19:25Z

1

And other question i can't find the place where you set $scope.skill in your controller, if it's a paremeter to be used in your funcion, you should receive it as a paremter of your function and pass it form the view if it's a variable on your controller it should be initialized or at least check if it exists.

By the way, In the html you have a div with ng-model, this is not correct ng-model should be place inside form inputs (select, input, textarea)

answered Jun 28, 2016 at 16:19

Alberto

1291 silver badge12 bronze badges

1 Comment

jashuang1130 Over a year ago

$scope.skill was determined in the controller, i didn't include it in the question. I wasn't sure if it was necessary to include it. thanks for the advice. i will update my ng-model.

Collectives™ on Stack Overflow

How to show sum of multiple inputs with AngularJS ng-Model?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related