Menu
I have JSON string of question and answer which binds in ng-repeat , now problem is i wants to show question once and all multiple answer within ng-repeat . this are my data.
{Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"African American",AnswerID:968,answer_type:"RADIO",fullquestion:"Your Race",id:6}{Answer:"Asian",AnswerID:969,answer_type:"RADIO",fullquestion:"Your Race",id:6}
view i am showing in
<div ng-repeat="hrq in HrqQuestions">
<div class="list card normal">
<div class="item item-body item-divider">
<p ng-bind="hrq.fullquestion"></p>
</div>
<label class="item item-input" ng-show="hrq.answer_type=='FREETEXT'">
<input ng-model="hrq.Answer" name="name" type="text">
</label>
<div ng-if="hrq.answer_type=='RADIO'">
<ion-radio ng-click="selectedAnswer(hrq.AnswerID,hrq.Answer)" name="radio1" ng-value="hrq.AnswerID">{{hrq.Answer}}</ion-radio>
</div>
</div>
</div>
but this binds all questions multiple times with answer like
Q.Your Race
White Your Race
Q.Your Race
African American Your Race
Q.Your Race
Asian
but i need like
Q. Your Race
White Your Race
African American Your Race
Asian
i will be very thankful if anyone can help me with this
208
To avoid this problem, you can use "track by" with ng-repeat. In track by you have to use angular expression that will be used to uniquely identify the each items in collection or model. "track by" tells the angular js that how angular js will track the association between DOM and the model (i.e. collection).
But ng-repeat is not the right thing to use when you have large datasets as it involves heavy DOM manipulations. And you should consider using ng-repeat with pagination. You can consider using transclusion inside a custom directive, to achieve the behavior you are looking for without using ng-repeat.
The first cell of the HTML Table row consists of the $index variable, thus it displays the row index of the respective HTML Table Row. Note: The $index variable is used to get the Index of the Row created by ng-repeat directive. Each row of the HTML Table consists of a Button which has been assigned ng-click directive.
Each iteration of ng-repeat creates a new child scope, and that new child scope always gets a new property.
Try this,
angular.module('app',['angular.filter']).controller('MainController', function($scope) {
$scope.HrqQuestions = [
{Answer:"White",AnswerID:967,answer_type:"RADIO",fullquestion:"Your Race",id:6},
{Answer:"African American",AnswerID:968,answer_type:"RADIO",fullquestion:"Your Race",id:6},
{Answer:"Asian",AnswerID:969,answer_type:"RADIO",fullquestion:"Your Race",id:6}
];
});<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<body ng-controller="MainController">
<div ng-repeat="(key, value) in HrqQuestions | groupBy: 'id'">
<div><strong>Id:</strong> {{ key }}</div>
<p ng-repeat="v in value">
<strong>Answer {{ $index + 1}}</strong>. {{ v.Answer }}
</p>
</div>
</body>
</html>Try like this fiddle
<div ng-controller="MyCtrl">
<div ng-repeat="hrq in HrqQuestions">
<div class="list card normal">
<div class="item item-body item-divider">
<p>{{$index + 1}}. {{hrq.fullquestion}}</p>
</div>
<div ng-repeat="answer in hrq.answers">
<label class="item item-input" ng-show="answer.answer_type=='FREETEXT'">
<input ng-model="answer.Answer" name="name" type="text">
</label>
<div ng-if="answer.answer_type=='RADIO'">
<input type="radio" ng-click="selectedAnswer(answer.AnswerID,answer.Answer)" name="radio1" ng-value="answer.AnswerID">{{answer.Answer}}
</div>
</div>
<br>
</div>
</div>
</div>
controller code
$scope.HrqQuestions = [{ fullquestion: "Your Race", id: 6,
answers: [{ Answer: "White", AnswerID: 967, answer_type: "RADIO" },
{ Answer: "African American", AnswerID: 968, answer_type: "RADIO" },
{ Answer: "Asian", AnswerID: 969, answer_type: "RADIO" }] },
{ fullquestion: "My Race", id: 7,
answers: [{ Answer: "Black", AnswerID: 967, answer_type: "RADIO" },
{ Answer: "African Indian", AnswerID: 968, answer_type: "RADIO" },
{ Answer: "India", AnswerID: 969, answer_type: "RADIO" }] }];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
