2016-10-18 7 views
0
<body ng-app="myApp" ng-controller="myCtrl"> 
    <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >  
     <div class="tittle" style="width: 25%;">     
       <a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a> 
       <a href="" style="text-decoration: none;" ng-if="!x.title"># No title</a> 
        <hr style="color: red"> 
       </a> 
      </b>     
     </div> 
     <div class="text">    
      <div style="width: 70% ;float:right; background-color: white;"> 
       <div ng-show="showDiv"> 
        <div style="float: right;"> 
        <img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;"> 
        </div> 
        <div style="color: purple;text-align: center;font-size:21px"> 
         {{x.title}} 
        </div><br> 
        <div> 
         {{x.text}} 
        </div> 
        <b> 
         URL:- 
        </b> 
        <a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br> 
       </div> 
      </div> 
     </div> 
    </div> 

Я работаю над модулем подачи новостей. У меня есть два div, в первом div (левом) списке всех заголовков новостей отображается, а на правой стороне div показано описание и изображение об этом названии. Но я не могу добавить вертикальную полосу прокрутки на левом div (title-div), если я применяю div, тогда он переходит только к каждому отдельному заголовку. Второй - когда страница загружает первый заголовок, описание будет загружаться автоматически, так как это сделать?Невозможно добавить вертикальную полосу прокрутки в html?

ответ

0

Добавить обертку.

Переполнение свиток идет на все tittle потому что title класс находится внутри ng-repeat и, таким образом, повторяется для каждого отдельного названия.

Добавьте еще одну оболочку обертки вне ng-repeat и примените переполнение переполнения к этому.

<div class="wrapper"> 
    <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" >  
     <div class="tittle" style="width: 25%;">     
       <a href="" ng-click="showDiv = ! showDiv" style="text-decoration: none;" ># {{x.title}} </a> 
       <a href="" style="text-decoration: none;" ng-if="!x.title"># No title</a> 
        <hr style="color: red"> 
       </a> 
      </b>     
     </div> 
     <div class="text">    
      <div style="width: 70% ;float:right; background-color: white;"> 
       <div ng-show="showDiv"> 
        <div style="float: right;"> 
        <img id="currentPhoto" src="{{x.thread.main_image}}" onerror="this.src='noimageavailable.png'" width="300px" height="250px" style="float: right;"> 
        </div> 
        <div style="color: purple;text-align: center;font-size:21px"> 
         {{x.title}} 
        </div><br> 
        <div> 
         {{x.text}} 
        </div> 
        <b> 
         URL:- 
        </b> 
        <a href="{{x.url}}" style=" color: blue;"> To see in details, click here! </a><br> <br> 
       </div> 
      </div> 
     </div> 
    </div> 
</div><!-- .wrapper --> 

И добавить overflow:scroll в обертку.

.wrapper { 
    overflow:scroll; 
} 

Обратите внимание, что это создаст прокрутку для названия и текста в сочетании. Поскольку они находятся в одной оболочке. Если вам нужно другое, вам нужно создать две разные обертки с двумя разными ng-repeat.

Смежные вопросы