时间戳

首页 > 解决方案 > 有条件地设置 HTML 元素属性

html - 有条件地设置 HTML 元素属性

问题描述

我有一个可在线编辑的数据表。可编辑的列之一是 md 输入字段。我可以很容易地添加md-maxlength="80"以显示字符计数器。鉴于此数据表是使用 UI-Grid 完成的（该代码在此处不相关），它将计数器应用于该列中的所有 md 输入。我真正想要的是只在焦点上显示字符计数器。这是使用 Angular 1.X。

到目前为止，我已经得到了这个，但我不知道表达式是否ng-class可以接受除 CSS 类之外的任何内容。


<md-input
    ng-init="focused=false"
    ng-class="{'md-maxlength=80': focused}"
    ng-focus="focused=true"
    ng-blur="focused=false"
    ...
</md-input>

标签： htmlangularjsng-classangularjs-material

解决方案

如果我理解正确，您想在ismd-maxlength="80"时添加属性。现在你正试图将属性设置为一个 CSS 类，这是没有意义的，因为你不能拥有focusedtrue<div class="myClass md-maxlength='80'">

为什么不只是md-maxlenth有条件地设置属性的值呢？将值设置为80whenfocused=true并将其设置为nullelse。可能将其设置为0或其他对控件有意义的值，md-input因为我不熟悉它。

<md-input
    ng-init="focused=false"
    md-maxlength="focused ? 80 : null"
    ng-focus="focused=true"
    ng-blur="focused=false"
    ...
</md-input>

推荐阅读