Question

我在md-content中使用ui-view来显示列表，但是我想要md-content中列表的溢出应该是可滚动的这是我的index.html

<div layout-lt-lg="row" class="screen-bg">
    <div flex-lt-lg="100">

        <!--header-->
        <md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
            <div class="status-bar-bg"></div>
            <div class="md-toolbar-tools">

                <md-button class="md-icon-button" aria-label="Settings">
                    <!--<md-icon md-svg-icon="app/images/back1.svg"></md-icon>-->
                </md-button>
                <h2>
                    <span></span>
                </h2>
                <span flex=""></span>
                <md-button class="md-icon-button" aria-label="Favorite">
                    <!--<md-icon md-svg-icon="app/images/a.svg"></md-icon>-->
                </md-button>

            </div>
        </md-toolbar>

        <!--content-->
        <div>
            <md-content>

                <ui-view></ui-view>
            </md-content>
        </div>
    </div>
</div>

这是我的模板

 <md-list flex>
        <md-list-item class="md-3-line" ng-repeat="broadCast in broadCasts">
          <div class="md-list-item-text" layout="column" >
            <h3>{{broadCast.name}}</h3>
            <h3>{{broadCast.phone}}</h3>
          </div>
        </md-list-item>
 </md-list>

Answer 1

使列表可滚动：

将类添加到md-list。

md-list.make-scrollable {
    height: 600px; //Or any other height you wish
    overflow-y: scroll;
}

在css文件中设置md-list的样式，如下所示：

var defer = $q.defer();
            var promises = [];
            var resProducts = [];
            var errorCallback = function (e) {

              defer.reject();
            };

           products.forEach(currProduct) {

                promises.push(function () {
                    Stock.saveNewStock(currProduct)
                        .then(function(res1) {
                            return Product.saveNewProduct(currProduct)
                        .then(function(res2) {
                            resProducts.push(res2);
                            Product.addStockToProduct(res1,res2)
                   })
             })
             .catch(function(err) {
                 console.log(err)
             })
                }


                );
              }

            });
            return $q.all(promises);

这应该使溢出的内容可滚动

Answer 2

您使用了太多不必要的容器元素。

<div layout-lt-lg="row" flex-lt-lg="100" class="screen-bg">
    <!--header-->
    <md-toolbar class="app-bar-bg" style="background-color: #9013fe;">
        <div class="status-bar-bg"></div> //desired controller buttons
        <div class="md-toolbar-tools"></div> //desired controller buttons
    </md-toolbar>

    <!--content-->
   <md-content flex ui-view>
   </md-content>
</div>

这是一个工作示例。有一些变化，但基本结构几乎相同。

如何在Angular材料设计中使md内容可滚动

2 个答案: