有条件地设置 HTML 元素属性

Question

我有一个内联 editable 数据 table。 editable 的其中一列是 md 输入字段。我可以很容易地添加 md-maxlength="80" 来显示字符计数器。鉴于此数据 table 是使用 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>

Answer 1

如果我没理解错的话，你想在 focused 为 true 时添加 md-maxlength="80" 属性。现在您正试图将属性设置为 CSS class 这没有任何意义，因为您不能 <div class="myClass md-maxlength='80'">

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

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

有条件地设置 HTML 元素属性

Setting HTML element attribute conditionally

html

angularjs

ng-class

angularjs-material