Как прокрутить до номера строки в JSON на панели div?

Question

У меня есть следующий фрагмент как часть веб-приложения AngularJS для отображения JSON в панели с вкладками.

<div class="col-md-10"> 
    <div class="version-tabs"> 
     <tabset> 
      <tab ng-repeat="data in dataDict.versions" heading="{{data}}" 
       active="dataDict.versionSelection[data].active"> 
       <div class="pad-top-sm"> 
        <pre class="response-textarea-tab pad-top-sm">{{formatJson(dataDict.versionSelection[data].json) | json}}</pre> 
       </div> 
      </tab> 
     </tabset> 
    </div> 
</div> 

Теперь я хотел бы, чтобы перейти к номеру строки в формате JSON, когда пользователь выбирает JSon путь, т.е. я хотел бы показать номер строки, что приводит к разнице, чтобы показать некоторый контекст для пользователя.

Как это сделать с помощью Javacript/AngularJS?

PS: Мне все еще нужно выяснить, как рассчитать номер строки, заданный для JSON-пути, особенно при форматировании JSON, но я найду способ.

Answer 1

Самый простой способ - это генерировать каждую строку с уникальным идентификатором (номер вашей строки), который будет использоваться в хеше URL для навигации: <div id="line5">Line 5 content</div>. Таким образом, вы можете использовать якорный элемент a с href в качестве идентификатора вашего идентификатора строки: <a href="#line5">Navigate to line 5</a>.

Проверить скрипку ниже

div { 
 
    padding-top: 40px; 
 
}

<div class="col-md-10"> 
 
    <div class="version-tabs"> 
 
     <tabset> 
 
      <a href="#line5">Navigate to line 5</a> 
 
      <tab ng-repeat="data in dataDict.versions" heading="{{data}}" 
 
       active="dataDict.versionSelection[data].active"> 
 
       <div class="pad-top-sm"> 
 
        <pre class="response-textarea-tab pad-top-sm">         <div id="line1">Line 1</div> 
 
         <div id="line2">Line 2</div> 
 
         <div id="line3">Line 3</div> 
 
         <div id="line4">Line 4</div> 
 
         <div id="line5">Line 5</div> 
 
         <div id="line6">Line 6</div> 
 
         <div id="line7">Line 7</div> 
 
         <div id="line8">Line 8</div> 
 
         <div id="line9">Line 9</div> 
 
         <div id="line10">Line 10</div>     </pre> 
 
       </div> 
 
      </tab> 
 
     </tabset> 
 
    </div> 
 
</div>