如何在div面板中滾動到JSON中的行號？

Question

我有以下片段作爲AngularJS Web應用程序的一部分，以在選項卡式面板中顯示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>。通過`http：// example.com /路徑＃line42`下面

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>