Here is the HTML code for creating a question template:
<body ng-controller="myCtrl">
{{loadDataSubject('${subjectList}')}}
{{loadDataTopic('${topicList}')}}
<h1 class = "bg-success" style="color: red;text-align: center">Fill in the below details for Question Template : -</h1> <br>
<div class="container">
<form method="get" action="createTemplate">
<div class="form-group">
<label for="sel1">Topics (select one):</label>
<select class="form-control" ng-model="selectedTopic" ng-options="topic.name as topic.name for topic in topics">
</select> <br>
{{selectedTopic}}
<label for="sel1">Subject (select one):</label>
<select name="subject" value= "" class="form-control" ng-model ="selectedSubject" ng-options="sub.name as sub.name for sub in subjects">
</select>
<br>
<label for="sel1">Negative marking:</label>
<select class="form-control" name="negativeMarks">
<option>Yes</option>
<option>No</option>
</select> <br>
<label>Reference Book:</label>
<input type="text" class="form-control" name="ref" required>
<label for="sel1">Number of Questions:</label>
<input type="number" class="form-control" name="questionCount" required><br>
<input class ="bg-primary" type="submit" value="submit and download template">
</div>
</form>
</div>
</body>
and here is the JavaScript code for AngularJS functionality:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.subjects = [];
$scope.topics = [];
$scope.selectedSubject = {};
$scope.selectedTopic = {};
$scope.loadDataSubject = function(subjectList) {
$scope.subjects = JSON.parse(subjectList);
};
$scope.loadDataTopic = function(topicList) {
$scope.topics = JSON.parse(topicList);
};
});
I am trying to add a filter to only select the subjects related to the selected topic, using something like this: filter : selectedTopic.id
The error I'm encountering is:
angular.js:38 Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…turn%20b(f%2Cc%2Ce)%7D%22%2C%22newVal%22%3A74%2C%22oldVal%22%3A68%7D%5D%5D
at angular.js:38
at r.$digest (angular.js:15934)
at r.$apply (angular.js:16160)
at angular.js:1679
at Object.e [as invoke] (angular.js:4523)
at c (angular.js:1677)
at yc (angular.js:1697)
at Zd (angular.js:1591)
at angular.js:29013
at HTMLDocument.b (angular.js:3057)
Prior to that, I also want to bind the value of an object to ng-model, while displaying the object's name. Any guidance on how to achieve this would be greatly appreciated as I am new to AngularJS.
Available subjects are: [{"subjectId":1,"name":"ComputerScience","code":"CS"},{"subjectId":2,"name":"Computer Basics","code":"CS","documentUrl":"None"},{"subjectId":3,"name":"Computer Basics","code":"CS","documentUrl":"None"},{"subjectId":4,"name":"php","code":"PHP01","documentUrl":"None"},{"subjectId":5,"name":"JAVA","code":"JAVA01","childSubjects":[{"subjectId":6,"name":"Core Java","code":"JAVA02","parentSubject":5,"childSubjects":[{"subjectId":8,"name":"Thread","code":"JAVA04","parentSubject":6},{"subjectId":9,"name":"Object Class","code":"JAVA05","parentSubject":6},{"subjectId":10,"name":"Inheritance","code":"JAVA06","parentSubject":6}]},{"subjectId":7,"name":"Advance Java","code":"JAVA03","parentSubject":5,"childSubjects":[{"subjectId":11,"name":"Servlet","code":"JAVA07","parentSubject":7}]}]},{"subjectId":12,"name":"Computer Basics","code":"CS","documentUrl":"None"}]
Available topics are:
[{"topicId":1,"name":"Technical","code":"TECH","isSubjectsRelated":1,"description":"All Technical subjects","isActive":1,"subjects":[{"subjectId":1,"name":"ComputerScience","code":"CS"},{"subjectId":1,"name":"ComputerScience","code":"CS"}]},{"topicId":2,"name":"GATE","code":"GATE","isSubjectsRelated":1,"description":"GATE exam","isActive":1,"subjects":[]},{"topicId":5,"name":"Programming","code":"PROG","isSubjectsRelated":0,"description":"Coding skills","isActive":1,"subjects":[{"subjectId":5,"name":"JAVA","code":"JAVA01"}]}]