Angularjs 在Angular.js中显示json数据
我正在使用下面的代码,我只获得问题id,但我需要的是当我单击Angularjs 在Angular.js中显示json数据,angularjs,json,Angularjs,Json,我正在使用下面的代码,我只获得问题id,但我需要的是当我单击保存按钮时,我想在文本框下方显示问题.id,选项.id和所选:真或假。下面的代码是正确的,但要使其与数组类似 controllers.js $scope.save = function() { $scope.msg = 'Question IDs:'; $scope.questions.forEach(function(el){ console.log(el)
保存
按钮时,我想在文本框下方显示问题.id
,选项.id
和所选
:真
或假
。下面的代码是正确的,但要使其与数组类似
controllers.js
$scope.save = function() {
$scope.msg = 'Question IDs:';
$scope.questions.forEach(function(el){
console.log(el)
$scope.msg += el.Id + ',';
})
}
{
"quiz": {
"Id": 2,
"name": "C# and .Net Framework",
"description": "C# and .Net Quiz (contains C#, .Net Framework, Linq, etc.)",
"paragraph": "In 2015 Microsoft released ASP.NET 5.ASP.NET 5 is a significant redesign of ASP.NET.ASP.NET, MVC, and Web Pages are now merged into a single framework named MVC 6.It includes the following features:Linux support OSX support Node.js supportA ngularJS supportTag ,HelpersView, ComponentsWeb ,APIGruntJS ,supportBower, supportNo ,Visual BasicNo Web Forms"
},
"config": {
"shuffleQuestions": true,
"showPager": false,
"allowBack": true,
"autoMove": false
},
"questions": [{
"Id": 1010,
"Name": "Which of the following assemblies can be stored in Global Assembly Cache?",
"QuestionTypeId": 1,
"Options": [{
"Id": 1055,
"QuestionId": 1010,
"Name": "Private Assemblies"
}, {
"Id": 1056,
"QuestionId": 1010,
"Name": "Friend Assemblies"
}, {
"Id": 1057,
"QuestionId": 1010,
"Name": "Public Assemblies"
}, {
"Id": 1058,
"QuestionId": 1010,
"Name": "Shared Assemblies"
}]
}, {
"Id": 1019,
"Name": "Which of the following does NOT represent Integer?",
"QuestionTypeId": 1,
"Options": [{
"Id": 1055,
"QuestionId": 1010,
"Name": "Char"
}, {
"Id": 1056,
"QuestionId": 1010,
"Name": "Byte"
}, {
"Id": 1057,
"QuestionId": 1010,
"Name": "Short"
}, {
"Id": 1058,
"QuestionId": 1010,
"Name": "Long"
}]
}]
}
在$scope.questions
中存储所有json数据
home.html
<div ng-repeat="question in filteredQuestions">
<div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
<div class="row">
<div class="row">
<h3>{{currentPage}}. <span ng-bind-html="question.Name"></span></h3>
</div>
</div>
<div class="row text-left options">
<div class="col-md-6" ng-repeat="option in question.Options" style="float:right;">
<div class="option">
<label class="" for="{{option.Id}}">
<h4> <input id="{{option.Id}}" type="checkbox" ng-model="option.Selected" ng-change="onSelect(question, option);" />
{{option.Name}}</h4>
</label>
</div>
</div>
</div>
<div class="center"><button ng-click="save()">Save</button></div>
<div class="center"><textarea rows="5" cols="50">{{msg}}</textarea></div>
</div>
可以将整个对象传递给函数,如下所示:
<div ng-repeat="question in filteredQuestions">
<div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
<div class="row">
<div class="row">
<h3>{{currentPage}}. <span ng-bind-html="question.Name"></span></h3>
</div>
</div>
<div class="row text-left options">
<div class="col-md-6" ng-repeat="option in question.Options" style="float:right;">
<div class="option">
<label class="" for="{{option.Id}}">
<h4> <input id="{{option.Id}}" type="checkbox" ng-model="option.Selected" ng-change="onSelect(question, option);" />
{{option.Name}}</h4>
</label>
</div>
</div>
</div>
<div class="center"><button ng-click="save(question, option)">Save</button></div>
<div class="center"><textarea rows="5" cols="50">{{msg}}</textarea></div>
</div>
在控制器中使用此代码可将问题id设置为选定选项id和非选定选项id
$scope.save = function() {
console.log('Question IDs:' + question.id);
$scope.questions.Options.forEach(function(option){
if(option.selected){
console.log('Selected Options:' +option.id)
$scope.msg = 'Question IDs: ' + question.id + ', Selected option id: ' + option.id;
}
else{
console.log('Not selected Options:' +option.id)
}
})
}
希望有帮助但这里我需要显示问题Id和所选选项Id。如果选择了任何答案,则包括所选:true否则所选:false@Sjoerddewitget在参数后出现类似Uncaught SyntaxError:missing)的错误list@Sherin我很抱歉。忘记将操作员添加到控制台中的concat
+
。请再试一次。是的,我发现了,我们需要在使用console.log(question.id)之前调用question。但是问题Id已经在选项中。所以我以前调用option.QuestionId,但它会给我类似“无法读取每个属性”的错误。这里的错误是什么@mJunaidSalaat
$scope.save = function() {
console.log('Question IDs:' + question.id);
$scope.questions.Options.forEach(function(option){
if(option.selected){
console.log('Selected Options:' +option.id)
$scope.msg = 'Question IDs: ' + question.id + ', Selected option id: ' + option.id;
}
else{
console.log('Not selected Options:' +option.id)
}
})
}