Group by Question and ng-model differentiation with AngularJS

Question

The objective is to make a survey which has N questions and N question options.

I am trying to group the questions and then differentiate each radio button with ng-model with its value to obtain an object

JS Fiddle or CodePen

JSON

[ { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05551fcfabc3354229e3c", "idSurveyQuestion": "5de05514fcfabc3354229e39", "option": "Precion" }, { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05555fcfabc3354229e3d", "idSurveyQuestion": "5de05514fcfabc3354229e39", "option": "Salud" }, { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05558fcfabc3354229e3e", "idSurveyQuestion": "5de05514fcfabc3354229e39", "option": "Costumbre" }, { "IdQuestion": "5de0552bfcfabc3354229e3a", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Como escuchaste del producto?", "IdQuestionOption": "5de0555dfcfabc3354229e3f", "idSurveyQuestion": "5de0552bfcfabc3354229e3a", "option": "Tv" }, { "IdQuestion": "5de0552bfcfabc3354229e3a", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Como escuchaste del producto?", "IdQuestionOption": "5de05563fcfabc3354229e40", "idSurveyQuestion": "5de0552bfcfabc3354229e3a", "option": "Radio" }, { "IdQuestion": "5de0552bfcfabc3354229e3a", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Como escuchaste del producto?", "IdQuestionOption": "5de0556efcfabc3354229e41", "idSurveyQuestion": "5de0552bfcfabc3354229e3a", "option": "Diario" }, { "IdQuestion": "5de05548fcfabc3354229e3b", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Cada cuando consumes?", "IdQuestionOption": "5de05579fcfabc3354229e42", "idSurveyQuestion": "5de05548fcfabc3354229e3b", "option": "Diario" }, { "IdQuestion": "5de05548fcfabc3354229e3b", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Cada cuando consumes?", "IdQuestionOption": "5de0557dfcfabc3354229e43", "idSurveyQuestion": "5de05548fcfabc3354229e3b", "option": "Semanal" }, { "IdQuestion": "5de05548fcfabc3354229e3b", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Cada cuando consumes?", "IdQuestionOption": "5de05582fcfabc3354229e44", "idSurveyQuestion": "5de05548fcfabc3354229e3b", "option": "Mensual" } ]

FUNCTION - CONTROLLER

$scope.Survey_Read_Antive = function () {
    $http.get("/API/Survey_Read_Antive").then(function (response) {
        $scope.data_survey = response.data;
        if ($scope.data_survey != "") {
            $http.get("/API/Question_Read", { params: { idSurvey: $scope.data_survey.Id } }).then(function (response) {
                $scope.data_Question = response.data;
                $scope.hide_Survey_Answer = false;
                $scope.hide_Survey_Answer_Enty = true;
            });
        } else {
            $scope.hide_Survey_Answer_Enty = false;
            $scope.hide_Survey_Answer = true;
        }
    });
}

HTML

<section class="row">
    <div class="col-md-12 text-center">
        <h3>PRODUCTO <b>{{data_survey.product | uppercase }}</b></h3>
    </div>
</section>
<section class="row">
    <div class="col-md-12">
        <h5><b>Descripción</b> {{data_survey.descriptionSurvey}}</h5>
        <br />
    </div>
</section>
<section class="row">
    <div class="col-md-12">
        <form name="Form">
            <section class="row" ng-repeat="data in data_Question">
                <div class="col-md-6">
                    <p>{{data.titleQuestion}}
                </div>
                <div class="col-md-6">
                    <label class="radio-inline">
                        <input type="radio" value="{{$index+1}}" ng-model='currentQuantity["id" + data.titleQuestion]' required> {{data.option}}
                    </label>
                </div>
            </section>
            <hr />
            <div class="row">
                <div class="col-md-2 col-md-offset-10">
                    <button class="form-control btn btn-info input-sm" ng-click="Survey_Save(data_survey.Id)" ng-hide="hide_Save">Finalizar</button>
                </div>
            </div>
        </form>
    </div>
</section>

VIEW

I want to get to this

IDE

Answer 1

The main problem in your code is that you are iterating the whole list i.e your array and hence it is printing title Question & option as it is supposed to.

So in order to make your code work as needed, you have to first find unique 'titleQuestion' from your array, so for that purpose, you need to add this 'angular.filter.min.js' library to your HTML.

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

and then your working HTML will be like this :

HTML:

<!doctype html>
<html ng-app="Demo" ng-controller="DemoController">

<head>
  <meta charset="utf-8" />
  <title>Grouping Nested ngRepeat Lists In AngularJS</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
  <script type="text/javascript">
    var demo = angular.module("Demo", ['angular.filter']);
    demo.controller("DemoController", function($scope, $timeout) {
      $scope.data_Question = [{
          "IdQuestion": "5de05514fcfabc3354229e39",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Porque compras?",
          "IdQuestionOption": "5de05551fcfabc3354229e3c",
          "idSurveyQuestion": "5de05514fcfabc3354229e39",
          "option": "Precion"
        },
        {
          "IdQuestion": "5de05514fcfabc3354229e39",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Porque compras?",
          "IdQuestionOption": "5de05555fcfabc3354229e3d",
          "idSurveyQuestion": "5de05514fcfabc3354229e39",
          "option": "Salud"
        },
        {
          "IdQuestion": "5de05514fcfabc3354229e39",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Porque compras?",
          "IdQuestionOption": "5de05558fcfabc3354229e3e",
          "idSurveyQuestion": "5de05514fcfabc3354229e39",
          "option": "Costumbre"
        },
        {
          "IdQuestion": "5de0552bfcfabc3354229e3a",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Como escuchaste del producto?",
          "IdQuestionOption": "5de0555dfcfabc3354229e3f",
          "idSurveyQuestion": "5de0552bfcfabc3354229e3a",
          "option": "Tv"
        },
        {
          "IdQuestion": "5de0552bfcfabc3354229e3a",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Como escuchaste del producto?",
          "IdQuestionOption": "5de05563fcfabc3354229e40",
          "idSurveyQuestion": "5de0552bfcfabc3354229e3a",
          "option": "Radio"
        },
        {
          "IdQuestion": "5de0552bfcfabc3354229e3a",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Como escuchaste del producto?",
          "IdQuestionOption": "5de0556efcfabc3354229e41",
          "idSurveyQuestion": "5de0552bfcfabc3354229e3a",
          "option": "Diario"
        },
        {
          "IdQuestion": "5de05548fcfabc3354229e3b",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Cada cuando consumes?",
          "IdQuestionOption": "5de05579fcfabc3354229e42",
          "idSurveyQuestion": "5de05548fcfabc3354229e3b",
          "option": "Diario"
        },
        {
          "IdQuestion": "5de05548fcfabc3354229e3b",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Cada cuando consumes?",
          "IdQuestionOption": "5de0557dfcfabc3354229e43",
          "idSurveyQuestion": "5de05548fcfabc3354229e3b",
          "option": "Semanal"
        },
        {
          "IdQuestion": "5de05548fcfabc3354229e3b",
          "idSurvey": "5ddf18d4fcfabd0ab05e1df4",
          "titleQuestion": "Cada cuando consumes?",
          "IdQuestionOption": "5de05582fcfabc3354229e44",
          "idSurveyQuestion": "5de05548fcfabc3354229e3b",
          "option": "Mensual"
        }
      ];
    });
  </script>
</head>

<body>
  <h1>
    Grouping ngRepeat Lists In AngularJS
  </h1>
  <section class="row">
    <div class="col-md-12">
      <form name="Form">
        <section class="row" ng-repeat="data in data_Question | unique: 'titleQuestion' ">
          <div class="col-md-6">
            <p>{{data.titleQuestion}}
          </div>
            <div class="col-md-6" ng-repeat="radioFilter in data_Question">
            <label class="radio-inline" ng-if="radioFilter.titleQuestion === data.titleQuestion">
                        <input type="radio" value="{{$index+1}}" ng-model='currentQuantity["id" + data.titleQuestion]' required> {{radioFilter.option}}
                    </label>
          </div>
        </section>
        <hr />
        <div class="row">
          <div class="col-md-2 col-md-offset-10">
            <button class="form-control btn btn-info input-sm" ng-click="Survey_Save(data_survey.Id)" ng-hide="hide_Save">Finalizar</button>
          </div>
        </div>
      </form>
    </div>
  </section>
</body>

</html>

The working demo for your problem is present in this Fiddle: Working Fiddle Link

This solves your problem.