如何使用 AngularJS ng-Model 显示多个输入的总和？

Question

此应用程序允许用户输入工作簿中特定主题的问题数量。我试图总结所有问题并给出 totalQuestions 的输出。

我创建了一个函数 (findTotalQuestions())。当数量输入框更改时，该函数将运行。我在控制台中收到错误消息：无法读取未定义的属性 'quantity'。我在想是因为 $scope.skill.quantity 没有被传递到函数中。我怎样才能解决这个问题？

<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>

控制器：

$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);
};

Answer 1

在服务中移动您的 getProposedSkills() 代码，然后在控制器中设置 $scope.skill 如下所示

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

您的控制器应该如下所示

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);
  }
})

Answer 2

还有其他问题，我找不到你在控制器中设置 $scope.skill 的地方，如果它是要在您的函数中使用的参数，您应该将其作为函数的参数接收并从视图中传递如果它是你控制器上的一个变量，它应该被初始化或者至少检查它是否存在。

顺便说一下，在 html 中你有一个带有 ng-model 的 div，这是不正确的 ng-model 应该放在表单输入中（select，输入, 文本区域)

如何使用 AngularJS ng-Model 显示多个输入的总和？

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

javascript

angularjs

angular-ngmodel