Как можно запустить панель прокрутки/использовать свойство переполнения в угловом приложении (через ng-повторяющиеся элементы)?

Question

У меня есть боковая панель в моем угловом приложении, и я пытаюсь сделать одно представление о том, что боковая панель перемещается по элементам, а содержимое в следующем div сохраняет ту же позицию (без прокрутки). Я смотрел так много похожих сообщений и пробовал все, но он просто не работает. Проблема в том, что либо вы можете прокручивать все на боковой панели, либо вообще не оставаться, либо оставаться внизу (без движения), но затем я прокрутила панель для элемента EACH (а не для всех элементов).

Я использовал ng-repeat, чтобы поместить предметы в область боковой панели - возможно, это отличается от углового, что с рег. HTML? Спасибо! Пс. Im использование gulp и sidbar - это директива, которую я здесь не включил. Если что-то важно, сообщите мне и включите его.

<li> 
    <a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a> 
    <div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()"> 

    <div class="sidebarBox"> 
     <h2 class="sideBarHeader">Cart </h2> 

     <div class="sidebarContainer" ng-repeat="item in cart"> 
      <img src="{{item.imageUrl}}" style="width:90px;height:100px;"> 

      <div class="sidebarContent"> 
       <p class="sidebarTitle">{{item.title}} </p> 
       <p class="sidebarSubtitle">Quality: {{item.quantity}}</p> 
       <p class="sidebarSubtitle">Price: ${{item.price}}</p> 
      </div> 
      <p class="sidebarLine"></p> 
     </div> 

    </div> 
    <br> 
    <div class="sidebarNoScroll"> 
     <p style="color:black;font-size:22px;">Total</p> 
     <p class="sidebarTotal">${{ total() }}</p> 
     <button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button> 
     <button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button> 
    </div> 

    </div> 
</li> 

css.

.sidebarContainer { 
    overflow:scroll; 
    height:224px; 
} 
.sidebarNoScroll { 
    overflow: hidden; 
} 

Answer 1

Оберните контейнер.

<div class="sidebarContainer"> 
     <div ng-repeat="item in cart"> 

     </div> 
</div>