Vikas vanvi Vikas vanvi - 3 months ago 8
AngularJS Question

check if items inside ng-repeat already contains value

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

Answer

Try this,

  1. Change your 'HrqQuestions' as array
  2. Group your questions using 'id'
  3. And repeat values of 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>

Comments