What is the best way to conditionally apply attributes in AngularJS

Question

I need to be able to add for example  contenteditable  to elements  based on a boolean variable on scope   Example use    lt h1 attrs    contenteditable   true     editMode   gt   content title   lt  h1 gt    Would result in contenteditable true being added to the element if  scope editMode was set to true  Is there some easy way to implement this ng-class like attribute behavior  I m considering writing a directive and sharing if not   Edit   I can see that there seems to be some similarities between my proposed attrs directive and ng-bind-attrs  but it was removed in 1 0 0 rc3  why so

User · Answer

Edit  This answer is related to Angular2   Sorry  I missed the tag   Original answer   As for the very simple case when you only want to apply  or set  an attribute if a certain Input value was set  it s as easy as    lt my-element  conditionalAttr   optionalValue    false  gt    It s the same as    lt my-element  conditionalAttr   optionalValue   optionalValue   false  gt     So optionalValue is applied if given otherwise the expression is false and attribute is not applied    Example  I had the case  where I let apply a color but also arbitrary styles  where the color attribute didn t work as it was already set  even if the  Input   color wasn t given     Component     selector   rb-icon     styleUrls    icon component scss      template    lt span class  ic-  icon     style color   color  color   ngStyle   styleObj   gt  lt  span gt       export class IconComponent       Input   icon  string      Input   color  string      Input   styles  string      private styleObj  object          So   style color  was only set  when the color attribute was there  otherwise the color attribute in the  styles  string could be used   Of course  this could also be achieved with    style color   color     and   Input color   string   boolean    false

User · Answer

Was able to get this working    ng-attr-aria-current      item isSelected  true    page    undefined      The nice thing here is that if item isSelected is false then the attribute simply isn t rendered

User · Answer

I got this working by hard setting the attribute  And controlling the attribute applicability using the boolean value for the attribute   Here is the code snippet    lt div contenteditable     condition    true     false     gt  lt  div gt    I hope this helps

User · Answer

I actually wrote a patch to do this a few months ago  after someone asked about it in  angularjs on freenode    It probably won t be merged  but it s very similar to ngClass  https   github com angular angular js pull 4269  Whether it gets merged or not  the existing ng-attr-  stuff is probably suitable for your needs  as others have mentioned   although it might be a bit clunkier than the more ngClass-style functionality that you re suggesting

User · Answer

You can prefix attributes with ng-attr to eval an Angular expression  When the result of the expressions undefined this removes the value from the attribute    lt a ng-attr-href    value    undefined    gt Hello World lt  a gt    Will produce  when value is false    lt a ng-attr-href    value    undefined    href gt Hello World lt  a gt    So don t use false because that will produce the word  false  as the value    lt a ng-attr-href    value    false    href  false  gt Hello World lt  a gt    When using this trick in a directive  The attributes for the directive will be false if they are missing a value   For example  the above would be false   function post  scope   el   attr          var url    attr  href      false        alert url     false

User · Answer

For input field validation you can do    lt input ng-model  discount  type  number  ng-attr-max    discountType          100   undefined    gt    This will apply the attribute max to 100 only if discountType is defined as

User · Answer

Also you can use an expression like this    lt h1 ng-attr-contenteditable     editMode   true   false     gt  lt  h1 gt

User · Answer

In the latest version of Angular  1 1 5   they have included a conditional directive called ngIf   It is different from ngShow and ngHide in that the elements aren t hidden  but not included in the DOM at all   They are very useful for components which are costly to create but aren t used    lt h1 ng-if  editMode  contenteditable true gt   content title   lt  h1 gt

User · Answer

lt h1 ng-attr-contenteditable    isTrue    undefined     gt   content title   lt  h1 gt   will produce when isTrue true    lt h1 contenteditable  true  gt   content title   lt  h1 gt   and when isTrue false    lt h1 gt   content title   lt  h1 gt

User · Answer

Just in case you need solution for Angular 2 then its simple  use property binding like below  e g  you want to make input read only conditionally  then add in square braces the attrbute followed by   sign and expression    lt input  readonly   mode   VIEW   gt

User · Answer

I am using the following to conditionally set the class attr when ng-class can t be used  for example when styling SVG    ng-attr-class    someBoolean  amp  amp   class-when-true      class-when-false        The same approach should work for other attribute types    I think you need to be on latest unstable Angular to use ng-attr-  I m currently on 1 1 4

User · Answer

To get an attribute to show a specific value based on a boolean check  or be omitted entirely if the boolean check failed  I used the following   ng-attr-example    params type     test     itWasTest    undefined      Example usage    lt div ng-attr-class    params type     test     itWasTest    undefined     gt   Would output  lt div class  itWasTest  gt  or  lt div gt  based on the value of params type

User · Answer

Regarding the accepted solution  the one posted by Ashley Davis  the method described still prints the attribute in the DOM  regardless of the fact that the value it has been assigned is undefined   For example  on an input field setup with both an ng-model and a value attribute    lt input type  text  name  myInput  data-ng-attr-value    myValue    data-ng-model  myModel    gt    Regardless of what s behind myValue  the value attribute still gets printed in the DOM  thus  interpreted  Ng-model then  becomes overridden   A bit unpleasant  but using ng-if does the trick    lt input type  text  name  myInput  data-ng-if  value  data-ng-attr-value    myValue    data-ng-model  myModel    gt   lt input type  text  name  myInput  data-ng-if   value  data-ng-model  myModel    gt    I would recommend using a more detailed check inside the ng-if directives

[angularjs] What is the best way to conditionally apply attributes in AngularJS?

Examples related to angularjs

Examples related to angularjs-directive