How to access json array in function and in loop with ng-repeat?
my html code is below for view page: -
<div class="all_ques_back col-md-12" ng-init="result()" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
and my controller code looks like this: -
var data = angular.module('App', ['ngRoute']);
data.controller('SmartLearnerController', function($scope, $location) {
$scope.result = function() {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
}
});
+3
source to share
3 answers
Please check a working example: DEMO
Just move ng-init to the tag above
i.e
<body ng-controller="MainCtrl" ng-init="result()" >
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
0
source to share
@Nimesh I moved ng-init to ng-controller div and changed {{ans}} to {{ans.QuestionLabel}}
Html: -
<div ng-app="myApp" ng-controller="Ctrl" ng-init="result()">
<div class="all_ques_back col-md-12" ng-repeat="ans in correctAns">
<div class="col-xs-1 col-md-1"><i class="fa fa-check-square fa-2x col_padd right_ans_font"></i></div>
<div class="col-xs-9 col-md-10 col_padd">
<div class="all_ques">hello your ans {{ans.QuestionLabel}}</div>
</div>
<div class="col-xs-1 col-md-1 col_padd"><i class="fa fa-angle-right right_arrow "></i></div>
</div>
Js: -
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
});
Output: -
0
source to share
The problem here is with the priority of the directive, ng-repeat has higher priority over ng-init, ng-init has priority = 450, where as ng-repeat with priority = 1000 (see angular source code). So technically ng-repeat runs before ng-init, so correctAns is empty.
You can either move ng-init up one level in HTML or into the ng-controller tag.
OR / ELSE
If you are trying to run something while your controller is loading, this is much easier than you thought:
var myAngApp = angular.module('myApp', []);
myAngApp.controller('Ctrl', function ($scope) {
$scope.result = function () {
$scope.correctAns = [{
"QuestionID": "1",
"QuestionLabel": "Why are mirrors often slightly curved (convex) ?",
"Image": "zibra-crossing.jpg",
"Correct": "two",
"Explaination": "Question one explaination is goes here"
}, {
"QuestionID": "2",
"QuestionLabel": "You are about to drive home. You feel very tired and have a severe headache. You should ?",
"Image": "",
"Correct": "one",
"Explaination": "Question two explaination is goes here"
}, {
"QuestionID": "3",
"QuestionLabel": "While you are driving on gra dient roads,you should ?",
"Image": "sign traffic.jpg",
"Correct": "one",
"Explaination": "Question three explaination is goes here"
}, {
"QuestionID": "4",
"QuestionLabel": "When child lock is applied in car ?",
"Image": "",
"Correct": "two",
"Explaination": "Question four explaination is goes here"
}]
$location.path("/reviewans");
};
$scope.result();
});
0
source to share