<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– Cubic2015-05-22 16:57:27 +00:00Commented May 22, 2015 at 16:57
Add a comment
|
2 Answers
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!
5 Comments
Prabhu
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.
bamboo_inside
hmm... is there a reason why you don't want to use ng-required instead?
Prabhu
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.
bamboo_inside
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.
Shehryar Abbasi
@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 checkedActually 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)
