如何使用AngularJS ng-Model顯示多個輸入的總和？

此應用程序允許用戶輸入工作簿中特定主題的問題數量。我試圖總結所有問題並給出總問題的結果。如何使用AngularJS ng-Model顯示多個輸入的總和？

我創建了一個函數（findTotalQuestions（）。），它將在數量輸入框更改時運行。在控制檯中出現錯誤：無法讀取未定義的屬性「數量」。我在想這是因爲$ 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); 
};

來源

2016-06-28 Jason

然後移動getProposedSkills()代碼在服務中設置的$scope.skill像下面

01控制器

你的控制器看起來應該像下面

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

來源

2016-06-28 15:59:39

及其它問題，我無法找到你設置$ scope.skill在你的控制器的地方，如果它在你的funcion中使用的paremeter，你應該收到它作爲函數的參數，如果它是你的控制器上的一個變量，它應該被初始化或者至少檢查它是否存在，並將它傳遞給視圖。

順便說一句，在HTML你有NG-model的DIV，這是不正確的NG-模式應該是表單輸入（選擇，輸入，文本區域）

來源

2016-06-28 16:19:25 Alberto

$ scope.skill在確定內部發生控制者，我沒有把它包括在問題中。我不確定是否有必要包括它。感謝您的建議。我會更新我的ng模型。 – Jason

如何使用AngularJS ng-Model顯示多個輸入的總和？

回答

相關問題