Geek Answers Handbook

Verify that the elements inside ng-repeat already contain a value

I have a JSON question line and the answer that binds in ng-repeat, now the problem is that I want to show the question once and all the multiple answers in ng-repeat. this is 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 show 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 connects all the questions several times with an answer like

  Q.Your Race White Your Race Q.Your Race African American Your Race Q.Your Race Asian

but i need

  Q. Your Race White Your Race African American Your Race Asian

I will be very grateful if anyone can help me with this.

+8
javascript angularjs angularjs-ng-repeat angular-ng-if
source share
2 answers

Try it,

  • Change 'HrqQuestions' as an array
  • Group your questions using 'id'
  • And repeat the meaning of the grouped questions. Like 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>
+3
source share

Try 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" }] }];
+3
source share

More articles:


All Articles