#javascript #angularjs #arrays #json #underscore.js
#javascript #angularjs #массивы #json #underscore.js
Вопрос:
Необходимо выполнить группировку объекта следующим образом (с нумерацией вопросов):
1. Header 1
Subheader 1
1.1 Question 1
1.2 Question 2
Subheader 2
1.3 Question 1
1.4 Question 2
2. Header 2
Subheader 1
2.1 Question 1
Subheader 2
2.2 Question 2
Успешно выполняется группировка вышеуказанным способом с использованием подчеркивания-js. Но мне нужна непрерывная нумерация вопросов внутри заголовка, чего я не могу достичь. Пожалуйста, обратитесь к jsfiddle, который я создал.
Частичное решение: я могу получить длину количества вопросов, с помощью которых я могу построить логику, но каждый раз, когда мой $index сбрасывается для каждого цикла, из-за чего я не могу получить общее количество вопросов внутри заголовка.
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="y in grid" ng-init="headerIndex = $index ;">{{headerIndex 1 }}. amp;nbsp;{{headers[headerIndex]}}
<div ng-repeat="x in y" ng-init="subHeaderIndex = $index;">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;{{x[0].sub_header_text}}
{{x.length}}
<div ng-repeat="z in x " ng-init="questionIndex = $index">
amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
{{headerIndex 1 }}.{{( (subHeaderIndex) * (x.length)) (questionIndex 1)}}
{{z.question_text}}
</div>
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.grid = {"Header in English template of German Country":{"SubHeader in English template in German Country":[{"question_text":"sadsad","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template in German Country","question_version":1,"question_id":151113,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"sadsaddsa","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template in German Country","question_version":1,"question_id":232366,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}],"SubHeader in English template of German Country":[{"question_text":"sadsaddsa","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template of German Country","question_version":1,"question_id":162308,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"sadsadsad","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template of German Country","question_version":1,"question_id":198190,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"sadsadsad","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template of German Country","question_version":1,"question_id":204945,"position_id":101,"template_id":194941,"question_typ":"Numeric","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}],"sub Header 2":[{"question_text":"dsfdsfdsf","header_text":"Header in English template of German Country","sub_header_text":"sub Header 2","question_version":1,"question_id":166093,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"true","status":"new","minimum_value":"null","maximum_value":"null"}]},"First Header creation":{"First Sub Header creation":[{"question_text":"sadsad","header_text":"First Header creation","sub_header_text":"First Sub Header creation","question_version":1,"question_id":160341,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}]},"Header for testing":{"SUb header to Czech Republic":[{"question_text":"sadsad","header_text":"Header for testing","sub_header_text":"SUb header to Czech Republic","question_version":1,"question_id":181485,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"sadsadsad","header_text":"Header for testing","sub_header_text":"SUb header to Czech Republic","question_version":1,"question_id":226726,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"sadsadsad","header_text":"Header for testing","sub_header_text":"SUb header to Czech Republic","question_version":1,"question_id":238704,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}],"subheadertest":[{"question_text":"sadsad","header_text":"Header for testing","sub_header_text":"subheadertest","question_version":1,"question_id":212819,"position_id":101,"template_id":194941,"question_typ":"Y/N","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}]},"Header Title":{"sab tilte":[{"question_text":"dsfdsfdsf","header_text":"Header Title","sub_header_text":"sab tilte","question_version":1,"question_id":204747,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"true","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text":"dsfdsfdsf","header_text":"Header Title","sub_header_text":"sab tilte","question_version":1,"question_id":234628,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"}],"sub header":[{"question_text":"dsfdsfdsfdsf","header_text":"Header Title","sub_header_text":"sub header","question_version":1,"question_id":243346,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"true","status":"new","minimum_value":"null","maximum_value":"null"}]}};
$scope.headers = Object.keys($scope.grid);
}
Ответ №1:
Поддерживайте счетчик на контроллере и увеличивайте его при каждом ng-repeat, чтобы получить непрерывную нумерацию вопросов и сбросить ее на уровне подзаголовка.
Измените свой HTML-код
<div ng-repeat="x in y" ng-init="subHeaderIndex = $index;number = resetCounter()">
amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;{{x[0].sub_header_text}}
{{x.length}}
<div ng-repeat="z in x" ng-init="questionIndex = $index; number = incrementCounter()">
amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
{{headerIndex 1 }}.{{( (subHeaderIndex) * (x.length)) (questionIndex 1)}}
{{z.question_text}} {{number}}
</div>
</div>
В контроллере
$scope.counter = 1;
$scope.resetCounter = function(){
return $scope.counter = 1;
}
$scope.incrementCounter = function() {
return $scope.counter ;
}
{{number}} в HTML поможет вам поддерживать непрерывную нумерацию вопросов
Обновленная скрипка: http://jsfiddle.net/Lvc0u55v/10556 /
Комментарии:
1. Мне не нужна непрерывная нумерация, как показано в вопросе, мне нужна непрерывная нумерация вопросов для всех вложенных заголовков в заголовке.
2. Не могли бы вы дать мне ожидаемый результат.
3. Привет, пожалуйста, найдите мой обновленный ответ и дайте мне знать, это то, что вам нужно. И, пожалуйста, найдите обновленную скрипку
4. Идеально, это то, что я искал. Я попробовал то же самое решение, но я попытался сбросить счетчик в ng-init вместо написания метода.