Question

<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>

我正在处理新闻Feed模块。我有两个div，在第一个div（左侧）列表中显示所有新闻标题，在右侧div显示关于该标题的描述和图像。但我无法在左侧div添加垂直滚动条（title-div），如果我应用div，那么它只会转到每个特定的标题。第二个是当页面加载第一个标题时，描述会自动加载，那么如何做到这两件事呢？

Answer 1

添加包装。

溢出滚动转到所有tittle，因为title类在ng-repeat内，因此会为每个单独的标题重复。

在ng-repeat之外添加另一个包装器div并将溢出滚动应用于此。

    <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创建两个不同的包装器。

无法在html中添加垂直滚动条？

1 个答案: