Setting HTML element attribute conditionally

Question

I have a data table that is in-line editable. One of the columns that is editable is an md-input field. I can easily enough add md-maxlength="80" to show the character counter. Given that this data table is done with UI-Grid (that code isn't relevant here), it applies the counter to all md-inputs in that column. What I really want is it to only show the character counter on focus. This is using Angular 1.X.

Ive got this so far, but I dont know if the expression to ng-class can accept anything except CSS classes.


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

Chris Barr · Accepted Answer · 2019-03-28 18:12:54Z

1

If I am understanding correctly, you want to add the md-maxlength="80" attribute when focused is true. Right now you are attempting to set the attribute as a CSS class which would make no sense since you can't have <div class="myClass md-maxlength='80'">

Why not just set the value of the md-maxlenth property conditionally? Set the value to 80 when focused=true and set it to null otherwise. Possibly set it to 0 or some other value that makes sense for the md-input control since I'm not familiar with it.

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

answered Mar 28, 2019 at 18:12

Chris Barr

34.7k28 gold badges105 silver badges157 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Setting HTML element attribute conditionally

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related