It seems like using direct attributes and the ng-attr-* directive do the same thing. For example, the following render equivalently:
<div ng-attr-id="{{ 'object-' + value }}">ID</div>
<div id="{{ 'object-' + value }}">ID</div>
When should I use ng-attr-* and when should I use the direct HTML attribute?
ng-attr is used for add or not the attribute in context. If the expression {{undefined || null}}, the attribute is not added otherwise if has a value then attribute is added with the value {{ value }}.
The most common cases is in interpolation.
Related:
Conditionally adding data-attribute in Angular directive template
You use them for custom html data attributes - like if you wanted an attribute of let's say myData you would do
<div ng-attr-myData="{{ 'object-' + value }}">ID</div>
There are only a few situations where ng-attr-[attribute]="{{angular stuff}}" is different from just [attribute]="{{angular stuff}}". Certain elements within certain browsers can be broken if ng-attr is not used. Angular's documentation lists a few examples:
size in <select> elements (see issue 1619)
placeholder in <textarea> in Internet Explorer 10/11 (see issue 5025)
type in <button> in Internet Explorer 11 (see issue 14117)
value in <progress> in Internet Explorer = 11 (see issue 7218)
Source: https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes
ng-attr can be used to dynamically assign value to an attribute of any html element.
One case, where I used it was to associate a label to a form control with dynamic id.
<label ng-attr-for="{{parameter.name}}">{{ parameter.name }}</label>
<input ng-attr-id="{{parameter.name}}" type="text">
Also, it can be used to assign dynamic value to a custom attribute.
Reference: here
Related
I want to use ng-model directive as element rather than as attribute inside tag,is there any way to do it?
well I've already designed my webpage in html and javascript and I want to include it in angularJS using "ng-include". So rather than adding attribute like,
<input type="checkbox" id="checkbox" name='rejectedPartsConfirmtodothis' ng-model="reject">
I want to put it in the format like, (as said in angulaJS documentation )
<ng-model>
<input --->
</ng-model>
but this is not working, any idea how can I make it work?
Quoting the content of the page
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
according to v1.5 official documentation : https://docs.angularjs.org/api/ng/directive/ngModel
Usage
as element: (This directive can be used as custom element, but be aware of IE restrictions).
<ng-model>
...
</ng-model>
I dont really think there would be a use case where you would really need to do this...instead try some alternative but use ng-model as an attribute as ng-model is a pre-defined directive given by angularjs...
You can build a new directive but you cannot modify ng-model to work as an element.
I am new to angular-js and i think this is a basic question how to get the value from a paragraph tag in angular-js? I tried with using ng-model but doesn't giving the value.Can anyone help me?
ng-model is working for two way binding. p tag is not supported for ng-model. if you want to bind p tag then you can use ng-bind or {{}}.
<p ng-bind="test"></p>
plunker code here with ng-bind
No. You can not use ng-model for <p> tag. If you want to show the value of scope variable inside <p> tag, Then you can use expressions.
Example
<p> {{ variable }} </p>
This will show the value of variable into paragraph.
Ng-model is not supported for P,H tags,,,
if you want to bind tags then use ng-class
<p ng-class="localUser.yourdata">{{localUser.yourdata}}</p>
<h1 ng-class="localUser.yourdata">{{localUser.yourdata}}</h1>
hope this is help full
You can only directly mutate that ng-model in the controller to which the view is binded via an input tag. You could use {{}} or ng-bind for one way binding, from controller to view. But to achieve two way data binding you need an input tag or other alternatives like select.
In your case if you want to read changes inside other tags like p tags you need to watch those tags inside the scope, using $scope.$watch and listen for updates have a callback function execute on change.
So basically you can't achieve what your trying to do here. This is because p tags have static values and they do not change, so one way data binding is the best option here, from controller to view during the initialization of that tag. No point, later, would you be able to change the value inside the p tag, thus no need for two data binding here. Thus ng-model is not supported. Only ng-bind or {{}}.
<input ng-model="example" required>
Is it possible to include or exclude the attribute "required" based on a condition?
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!
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)
Normally, with a form and input fields, the form controller is published into the related scope under the form name attribute. And, the NgModelController is published under the input name attribute.
So for an input field with an ngModel directive, the NgModelController for the input field can be retrieved like $scope.myFormName.myInputFieldName
The question is how to do the same thing (get the NgModelController) for input fields inside the ngRepeat directive?
I would like to name the input fields using $index as part of the name so each template instance is uniquely named. This renders OK, so
<input name="foo_{{$index}}" ...
renders the instance with $index == 3 to
<input name="foo_3" ...
But trying to get the ngModelController via the published names does not work (it's undefined), e.g.:
$scope.myFormName.foo_3
A plunker showing this is here: http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview
It shows successfully getting the ngModelController for a 'plain' input element and calling $setValidity, and also shows failing to get the ngModelController for an input element inside an ngRepeat directive.
Copied the relevant section of code from the plunker below:
<div ng-repeat="element in elements">
<div ng-class="{error: form['foo_{{$index}}'].$invalid}">
<input name="foo_{{$index}}" ng-model="element.a" type="number">
<span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span>
</div>
</div>
{{form.foo_0.$setValidity('bar', false)}}
#Flek is correct that the new child scopes that ng-repeat creates are the root of the problem here. Since browsers do not allow nesting of <form> elements, ngForm must be used when nesting forms, or when you want to do form validation inside ngRepeat.
See Pawel's answer on the google group thread, which shows how to use ng-form to create inner forms, and/or #blesh's SO answer.
If i understand your question correctly, you are trying to have access to the form elements created inside the ng-repeat.
Please have a look at this fiddle http://jsfiddle.net/EF5Jp/. Inside the button click handler you will have the access to the element with id myForm.foo_2. You can notice that the element is retrieved by myForm.foo_2 and not $scope.myForm.foo_2. Second thing is, changing the value using its scope and not using its value property like angular.element(element).scope().foo = 6;.
The Select tag I am using in conjunction with ng-switch does not properly display nor function properly after being set once.
<select ng-model="visuals" ng-options="visual for visual in visuals">
See JSFiddle:
http://jsfiddle.net/timothybone/UaFuc/3/
Thanks in advance!
:D
You should not bind visuals using ng-model as it is the list of items. Setting it replace the list value by the chosen item (which is a list of characters). Causing the strange behaviour.
<select ng-model="item" ng-options="visual for visual in visuals">
This new variable must be declared in the scope. It is also used to set an initial value:
$scope.item = 'none';
Your switch usage was also wrong, you need en enclose condition in the switching block.
<div ng-switch on="item">
<span ng-switch-when="lots">Youtube</span>
<span ng-switch-default></span>
</div>
If you want to set the content of the HTML using ng-bind-html-unsafe you should provide a variable as parameter (not sure how you could inject javascript that way).
<span ng-switch-when="lots" ng-bind-html-unsafe="youtube">Could not evaluate 'youtube' variable</span>
The span content is then replaced. Of course a new variable must be defined in the scope to hold the HTML content:
$scope.youtube = "<hr/>This is an HTML content<hr/>";
I updated the jsFiddle: http://jsfiddle.net/PMpLa/4/