What is the best way to conditionally apply attributes in Angular?

What is the best way to conditionally apply attributes in Angular?

I need to be able to add for example "contenteditable" to elements, based on a boolean variable on scope.

Example use:

{{content.title}}
  

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?

Answer by Ashley Davis for What is the best way to conditionally apply attributes in Angular?

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 && '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)

Answer by Brian Genisio for What is the best way to conditionally apply attributes in Angular?

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:

{{content.title}}
  

Answer by chronicsalsa for What is the best way to conditionally apply attributes in Angular?

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.

Answer by acazacu for What is the best way to conditionally apply attributes in Angular?

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:

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:

I would recommend using a more detailed check inside the ng-if directives :)

Answer by ThinkingMedia for What is the best way to conditionally apply attributes in Angular?

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.

Hello World  

Will produce (when value is false)

Hello World  

So don't use false because that will produce the word "false" as the value.

Hello World  

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);  }  

Answer by jsbisht for What is the best way to conditionally apply attributes in Angular?

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:

I hope this helps.

Answer by Garfi for What is the best way to conditionally apply attributes in Angular?

{{content.title}}

will produce when isTrue=true :

{{content.title}}

and when isTrue=false :

{{content.title}}

Answer by Glen for What is the best way to conditionally apply attributes in Angular?

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:

Would output

or

based on the value of params.type

Answer by Kamuran Snecek for What is the best way to conditionally apply attributes in Angular?

Also you can use an expression like this:

Answer by Nestor Britez for What is the best way to conditionally apply attributes in Angular?

For input field validation you can do:

This will apply the attribute max to 100 only if discountType is defined as %

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72