Verify whether the items within the ng-repeat directive already contain the specified value

Question

Verify whether the items within the ng-repeat directive already contain the specified value

I am facing an issue with displaying a JSON string of questions and answers in ng-repeat. The problem is that I want to display each question only once, but show all the multiple answers within ng-repeat.

{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}

The current view I have set up is as follows:

 <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>

Currently, the questions are being repeated multiple times with different answers, like:

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

However, what I need is:

     Q. Your Race
           White 
           African American  
           Asian

If anyone can help me achieve this structure, I would greatly appreciate it.

javascript angularjs angularjs-ng-repeat angular-ng-if

Answer 1

Answer №1

Here is a suggestion:

Make sure to set your 'HrqQuestions' variable as an array
Group your questions based on their unique 'id' values
Repeat the same values for grouped questions

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>

Answer 2

Here is a suggestion:

Make sure to set your 'HrqQuestions' variable as an array
Group your questions based on their unique 'id' values
Repeat the same values for grouped questions

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>

Answer 3

Answer №2

For a demonstration, check out 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>

Here is the 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" }] }];

Answer 4

For a demonstration, check out 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>

Here is the 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" }] }];

Verify whether the items within the ng-repeat directive already contain the specified value

Answer №1

Answer №2

Similar questions

Tips on allowing a rectangle to be draggable using HTML5

Check for compatibility of overflow:scroll with mobile browsers

Having trouble getting the if statement to run with JavaScript Closures?

Combine several items to form a single entity

Guide on transferring data from a component to App.vue in Vue 3, even with a router-view in the mix

JavaScript: Only a single function call is successful

How can I stop TypeScript from causing my builds to fail in Next.js?

Error while retrieving reference from mongoDB in NodeJS

There seems to be an issue with declaring Gulp Open

I'm attempting to make this script function correctly when an image is loaded

Tips for safely storing JWT tokens in a react/next.js app:

Encountering status code 0 when handling 413 (Request Entity Too Large) error in AngularJS with Loopback API

Scope binding is successful, but accessing the array is only possible after adding an Alert() function

Present the retrieved JSON data values in an alternative layout on the table

The onClick functionality for the IconComponent (dropdown-arrow) in React Material UI is not functioning properly when selecting

What are the steps to create an endless scrolling feature?

What is the process for removing a specific row from a datatable?

The interlocking web of Angular dependencies

Verify the accuracy of quiz responses with PHP and AJAX

Retrieve key-value pairs from a database and store them as variables in PHP before transferring them into an array in JavaScript