Question

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

我创建了一个函数（findTotalQuestions（）。），它将在更改数量输入框时运行。我在控制台中收到错误：无法读取属性＆＃39;数量＆＃39;未定义的。我在想它，因为$ 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的地方，如果它是你的功能中使用的一个paremeter，你应该接收它作为你的功能的paremter并从视图中传递它如果它是你控制器上的变量，它应该被初始化或者至少检查它是否存在。

顺便说一句，在html中你有一个带有ng-model的div，这是不正确的ng-model应该放在表单输入中（select，input，textarea）

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

2 个答案: