json - 使用 AngularJS 按问题分组和 ng-model 差异化

Question

目标是进行一个包含 N 个问题和 N 个问题选项的调查。

我正在尝试对问题进行分组，然后将每个单选按钮与 ng-model 及其值区分开来，以获得一个对象

JSON

[ {“IdQuestion”：“5de05514fcfabc3354229e39”，“idSurvey”：“5ddf18d4fcfabd0ab05e1df4”，“titleQuestion”：“Porque compras？”，“IdQuestionOption”：“5de05551fcfabc3354229e3c”，“idSurveyQuestion”：“5de05514fcfab”选项" }, { "IdQuestion": "5de05514fcfabc3354229e39", "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion": "Porque compras?", "IdQuestionOption": "5de05555fcfabc3354229e3d", "idSurveyQuestion": "33option": "5de0525e44" "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”，“选项”：“收音机”}，{ 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 消费？”，“IdQuestionOption”：“5de0557dfcfabc3354229e43”，“idSurveyQuestion”：“5de05548fcfabc3354229e3b”，“选项”：“Semanal”}，“IdQuestion”：“Idfcfabc3358” , "idSurvey": "5ddf18d4fcfabd0ab05e1df4", "titleQuestion”：“Cada cuando 消费？”，“IdQuestionOption”：“5de05582fcfabc3354229e44”，“idSurveyQuestion”：“5de05548fcfabc3354229e3b”，“option”：“Mensual”}]

功能 - 控制器

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

看法

我想达到这个

IDE

score 1 · Accepted Answer

您的代码中的主要问题是您正在迭代整个列表，即您的数组，因此它按预期打印标题问题和选项。

因此，为了使您的代码按需要工作，您必须首先从您的数组中找到唯一的“titleQuestion”，为此，您需要将此“angular.filter.min.js”库添加到您的 HTML 中。

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

然后你的工作 HTML 将是这样的：

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>

此小提琴中存在针对您的问题的工作演示： Working Fiddle Link

这解决了你的问题。

json - 使用 AngularJS 按问题分组和 ng-model 差异化

1 回答 1

Related

Reference