【问题标题】:multiple checkbox with read more link in angular 4角4中带有阅读更多链接的多个复选框
【发布时间】:2018-01-10 18:41:55
【问题描述】:

Multiple checkbox with angular 4

我在 Angular 4 中有一个场景,其中有 10 个或更多材料复选框,但我想将复选框限制为 3,但是当我单击“阅读更多”链接时,它应该显示所有复选框。 请帮助实现这是角度4? 我正在使用的示例角度材料代码::

      <h3>Village(s)</h3>
  <md-selection-list #village value="village"> 
    <md-list-option *ngFor="let item of data.villages" [value]="item" (click)="submit(item)">
      {{item}}
    </md-list-option>
  </md-selection-list>

【问题讨论】:

    标签: javascript angular checkbox angular-material2


    【解决方案1】:

    最简单的方法是使用类切换器并将其应用于&lt;md-selection-list&gt;

    CSS:

     .more {
          overflow: hidden;
          height: 10rem // calculate height of md-list-option * 4
        }
    

    HTML:

     <md-selection-list #village value="village" [ngClass]="{'more': village.length > 4}"> 
    

    最后,在&lt;md-selection-list&gt; 之后添加spandiv 元素以获取更多链接:

    <div (click)="village.classList.remove('more')">Read more</div>
    

    【讨论】:

    • 上面的代码根本不工作...我想要 4 个默认的复选框(在原始状态),点击“阅读更多”,我想显示所有的复选框。@simpleDmitry
    猜你喜欢
    • 2016-09-28
    • 1970-01-01
    • 2015-02-04
    • 1970-01-01
    • 2012-11-01
    • 1970-01-01
    • 1970-01-01
    • 2013-03-25
    • 2017-02-21
    相关资源
    最近更新 更多