Question

我使用Angular Material应用程序时遇到了一些布局问题。我对AngularJS很陌生，所以希望它只是一个显而易见的东西。

第一个也是最令人讨厌的是，我正在努力寻找一个Angular Material列表，因为我喜欢它。

<md-content layout-padding>
  <section>
    <md-list ng-cloak>
      <md-list-item class="md-3-line" ng-repeat="item in items | filter:filtered" go-click="item/{{item.id}}">
        <md-icon class="material-icons">{{ item.acknowledgedBy ? 'assignment' : 'assessment'}}</md-icon>
        <div class="md-list-item-text" layout="column" style="overflow: hidden; text-overflow: ellipsis;">
          <h3>{{item.id}} - blah blah </h3>
          <h4>2016-01-01 15:23:45</h4>
          <h4>{{ item.description }}</h4>
        </div>
        <md-checkbox  class="md-secondary" aria-label="Select {{item.id}}" ng-checked="selected.indexOf(item) > -1" ng-click="toggleSelection(item)"></md-checkbox>
      </md-list-item>
    </md-list>
  </section>
</md-content>

上面按照我的预期工作，直到我将复选框添加到列表项。但是，这似乎可以防止描述的文本被省略号截断。其中一些描述可能很大，我只想显示一行值，主要操作将完整显示信息。

https://plnkr.co/edit/thktG7C63cZv0FhqCzOD

有一个吸食者

我的另一个小问题，在同一页面上，我希望两个标题栏保持在页面顶部，主要应用程序标题和菜单位于顶部，并查看下面的特定标题和菜单选项。目前，页面特定的一个人从视图中掠过。

Answer 1

回答你的第二个问题。

使用md-content作为父元素，因为它会在需要时提供滚动条。现在，在第二个md-content之外放置的任何内容都不会是可滚动的并且将作为静态标头使用。

这是完整的代码。我使用简单的ng-repeat和md-button来设置更多内容并设置标头。你可以随意使用它。

<md-content layout='column' layout-fill style='background-color:white'>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
  <div class="md-toolbar-tools">
    <md-menu>
      <md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
        M
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button go-click="/">
            Home
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button go-click="/items">
            Items (12)
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu>
    <h2>Mobile App</h2>
    <span flex></span>
    <md-button ng-click="page='report';option='option'">
      Report Problem
    </md-button>
    <md-button ng-click="page='unread';option='unread option'">
      Unread Messages
    </md-button>
  </div>
</md-toolbar>
<div layout='row'>
  <span>
  Current Page -> {{page}} 
    </span>
  <span flex></span>
  <span>
    Options - {{option}}
  </span>
</div>
<md-content flex layout='column' style='background-color:yellow'>
  <md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
  <md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
</md-content>

这是一个工作示例。 http://codepen.io/next1/pen/yJyOvP

Answer 2

有一些问题：

<强> 1。当屏幕小于item.description的线宽时，事物会被推出屏幕

这是由white-space: nowrap;标记上的<h4>引起的。您可以使用white-space: normal;覆盖布局来修复布局。

md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > ._md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > ._md-no-style .md-list-item-text h4 {
    white-space: normal;
}

（我实际上会使用<div>并给它一个样式而不是使用<h4>标签，因为大多数CSS框架都会出现这种问题。）

<强> 2。但现在文本将换行到下一行

我认为使用limitTo角度过滤器来使用JavaScript比使用CSS要容易得多。将值设置为100，因此它将显示字符串的100个字符并隐藏其余字符。这是原始问题：Limit the length of a string with AngularJS。

{{ "My String Is Too Long" | limitTo: 9 }} // outputs "My String"

第3。显示两个标题栏

我认为除非你破解Angular Material框架，否则这是不可能的。

AngularJS材质布局问题

2 个答案: