AngularJS材料布局问题

我有几个关于角度材质应用的布局问题。我对AngularJS很陌生，所以希望这只是一些显而易见的事情

第一个也是最令人恼火的是，我正在努力获得一个角度材料列表，看起来就像我想要的那样

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

{{item.acknowledby？'assignment'：'assessment'}
{{item.id}}-诸如此类
2016-01-01 15:23:45
{{item.description}}

在我将复选框添加到列表项之前，上述操作与我预期的一样有效。但是，这似乎可以防止描述的文本被省略号截断。其中一些描述可能很大，我只想显示一行内容，主要操作将完整显示信息

有一只猛扑在地上

---

我的另一个小问题是，在同一个页面上，我希望两个标题栏都保持在页面顶部，主应用程序标题和菜单保持在顶部，并在下面查看特定的标题和菜单选项。目前，特定于页面的视图会被忽略。

有几个问题：

1。当屏幕小于

项的线宽时。说明

内容被挤出屏幕

这是由

空白：nowrap在
标签上。您可以通过使用
空白：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;
}

（我实际上会使用
并为其提供一种样式，而不是使用
标记，因为大多数CSS框架都会遇到这种问题。）

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

我认为使用
limito
angular过滤器来处理JavaScript比使用CSS要容易得多。将该值设置为100左右，这样它将显示字符串中的100个字符，并隐藏其余字符。以下是原始问题：

3。显示两个标题栏

我认为这是不可能的，除非你破解了棱角材料框架。
回答你的第二个问题

使用
md content
作为父元素，因为如果需要，它将提供一个滚动条。现在，在md content内部，您放置在第二个
md content
之外的任何内容都将不可滚动，并将用作静态标题

这是一个完整的代码。我使用简单的
ng repeat
和
md按钮来设置更多内容和设置标题。你可以随意使用

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


M
家
项目（12）
移动应用
报告问题
未读邮件
当前页面->{{Page}
选项-{{option}
{{item}}
{{item}}


下面是一个工作示例
 试着用
棱角材料
的方式给出答案，而不是使用
css
技巧。我说用
而不是
，这样你就不会有问题了，另外，下次请在问题中写下这一点，而不是假设人们理解。在第一个问题中，您希望在列表中显示有限数量的字符，对吗？
<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>