分组数组内的编号

时间:2016-10-05 10:37:04

标签: javascript angularjs arrays 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 }}. &nbsp;{{headers[headerIndex]}}
  <div ng-repeat="x in y" ng-init="subHeaderIndex = $index;">&nbsp;&nbsp;&nbsp;&nbsp;{{x[0].sub_header_text}}
{{x.length}}
          <div ng-repeat="z in x " ng-init="questionIndex = $index">          
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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);
}

JSFiddle - http://jsfiddle.net/mdaamir1989/Lvc0u55v/10517/

1 个答案:

答案 0 :(得分:1)

在控制器上维护一个计数器,并在每次重复重复时增加一个计数器,以获得连续的问题编号,并在副标题级别重置。

更改您的HTML

<div ng-repeat="x in y" ng-init="subHeaderIndex = $index;number = resetCounter()">
       &nbsp;&nbsp;&nbsp;&nbsp;{{x[0].sub_header_text}}
          {{x.length}}
   <div ng-repeat="z in x" ng-init="questionIndex = $index; number = incrementCounter()">        
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&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++;
}
HTML中的

{{number}}将帮助您维护问题的连续编号

更新小提琴:http://jsfiddle.net/Lvc0u55v/10556/