Conditional HTML5 attributes in AngularJS?

Question

<input ng-model="example" required>

Is it possible to include or exclude the attribute "required" based on a condition?

Where does the condition come from? Maybe you should not generate the attribute on the server side? Also, what do you hope to achieve by doing this? Are you sure you actually need this custom attribute/need to conditionally remove it? — Cubic, May 22 '15 at 16:57

score 1 · Answer 1 · answered May 21 '15 at 23:43

1

you can use

<input type="text" ng-required="isRequired"/>

where in your controller:

$scope.isRequired = true;

Just set your scope variable to whatever condition you want!

answered May 21 '15 at 23:43

bamboo_inside

462
4
15

In my case there is no "=". It is an HTML5 attribute. So I was wondering if there is anyway that I can completely exclude it from the HTML based on a condition. – Prabhu May 21 '15 at 23:48
hmm... is there a reason why you don't want to use ng-required instead? – bamboo_inside May 21 '15 at 23:51
Actually I posted "required" just as an example. In my particular case it's a custom attribute and the presence of it whether the value of true or false affects the functionality. So I need to not include the attribute depending on the condition. – Prabhu May 21 '15 at 23:53
From what I understand, the ng-required directive should work in your case. It will set the form input to "required" if your condition is truthful, or it won't be required otherwise. – bamboo_inside May 21 '15 at 23:55
@Prabhu check a possible solution i presented below with examples. from what you have commented on so far, i think you are referring to an HTML5 `empty attribute syntax` like `required` or `checked` – Shehryar Abbasi May 22 '15 at 02:05

score 0 · Answer 2 · edited May 23 '17 at 12:31

Actually I posted "required" just as an example. In my particular case it's a custom attribute and the presence of it whether the value of true or false affects the functionality. So I need to not include the attribute depending on the condition.

if this is in reference to empty HTML5 attributes and removing the attribute itself to avoid a boolean true condition then:

Example from MDN docs element.removeAttribute() :

// <div id="div1" align="left" width="200px"> 
document.getElementById("div1").removeAttribute("align"); 
// now: <div id="div1" width="200px">

Then according to AngularJS docs on angular.element and this external blog post you can:

remove an attribute with: angular.element(DOMelement).removeAttr(attribute)
read an attribute with angular.element(DOMelement).attr(attribute)
set an attribute with angular.element(DOMelement).attr(attribute, value)

Note: all element references in Angular are always wrapped with jQuery or jqLite; they are never raw DOM references.

hope this helps - GL!

EDIT1: Here's an SO discussion about DOM manipulation and Angularjs here's another

EDIT2: Here's an external tutorial on how to create an AngularJS Directive for DOM manipulations (including Unit testing)

Conditional HTML5 attributes in AngularJS?

2 Answers2