Question

根据这个Link，div需要设置为固定的高度，但是这里的代码不能用于此代码。

<div style="margin-top:0.5vh;">
      <div style="height:200px;border:1px solid red;overflow:auto;" ng-init = "home_init()">
        <ol>
        <li ng-repeat= "site in sites">
          <button ng-if="!(site.Initial===flash_site)" class="button button-block" style="background-color:#{{site.Color}};" ng-click="site_selected({{site}})">
            <b>{{site.Name}}</b>
          </button>
          <button ng-if="(site.Initial===flash_site)" class="button button-block" style="background-color:#FFFFFF;">
            <b>{{site.Name}}</b>
          </button>
        </li>
      </ol>
   </div>
</div>

试图这样做，

<div style="height:200px;overflow-y:auto;">
  <div style="min-height:200px">
    <div ng-repeat="site in sites">
    </div>
  </div>
</div>

以及其他一些方法，真的不明白为什么div不包含ng-repeat元素。

如果有人能解释原因吗？

图片

这是红色边框上滚动的位置。 “Queentown”隐藏在父div下方，位于红色边框下方。

更新

实际上下面的任何答案都是正确的，而在我的代码中无法使用是这个罪魁祸首。滚动类已启用，并且通过它关闭了滚动，现在任何答案都可以使用。

顺便说一下，谢谢你的时间和效果。欣赏它。

Answer 1

请检查以下代码：

<div style="height:200px;overflow-y:auto;" ng-init="init()">
  <div style="min-height:200px">  
      <ul>
	   <li ng-repeat="x in records">{{x}}</li>
      </ul>
  </div>
</div>

试试这个链接 JSFiddle

Answer 2

Plunker

assets/images/gambar_paket

<button ng-if="!(site.Initial===flash_site)" class="button button-block" ng-style="{'background-color': site.Color}" ng-click="site_selected(site)"> - 您在这里不需要ng-click="site_selected({{site}})。

{{}} - 您也不需要style="background-color:#{{site.Color}};"。

将{{}}更改为style以动态呈现颜色。

如果您想使用颜色代码，请使用ng-style

连结#

color

Answer 3

<div style="height:200px;overflow-y:auto;" ng-init="init()">
  <div style="min-height:200px">  
      <ul>
	   <!--<li ng-repeat="x in records">{{x}}</li>-->
           <li>x</li>
           <li>x</li>
            <li>x</li>
            <li>x</li>
             <li>x</li>
              <li>x</li>
                <li>x</li>
                  <li>x</li>
                   <li>x</li>
           <li>x</li>
            <li>x</li>
            <li>x</li>
             <li>x</li>
              <li>x</li>
                <li>x</li>
                  <li>x</li>
      </ul>
  </div>
</div>

另外我给出了一个静态李的例子尝试一次

溢出-y不适用于ng-repeat

3 个答案: