Let's say that I have a form name "signupForm". When I use the ng-disabled directive on a button (to disable the form in case its invalid), I use
ng-disabled="{{formName}}.$invalid"> (formName contains the value signupForm)
When I inspect the button in browser, the above directive evaluates to ng-disabled="signupForm.$invalid">. This is perfect. The problem is that when I try to use the same expression inside of the ng-messages directive, like: ng-messages ="{{formName}}.$error"> the expression is NOT interpolated. So if I use the directive on a div and inspect it in browser, I see it as:
<div ng-messages="{{formName}}.$error"></div> whereas I expect it to be shown as <div ng-messages="signupForm.$error"></div>. But this does not happen.
So what can be done to make the ng-messages directive interpolate the expression & show it correctly? I have tested this issue with AngularJS 1.4.7 & 1.5.0-rc.1 and the issue exists in both of them. Any help is appreciated. Thank you.
ng-messages=this[formName].$error
ng-messages doest not allow interpolation in attribute value.
but we can pass expression to be evaluated.
this in html represent current scope and it has all the information about form with validations too. you can log it and see yourself.
ng-messages="this[formName][fieldName].$error"
ng-messages="this[formName].$error"
will work, worked for me
Related
I have md-select with the values from the database. The value having a name with special characters. I am using angularjs material.
Example: In database: Sathya & ram,
It displays like: Sathya & ram in md-option.
How can I resolve this?
You could wrap the value into a div with the directive ng-bind-html like this:
<div ng-bind-html="$ctrl.name"></div>
This directive evaluated Html, so use with care
Docs for ngBindHtml
EDIT
I think you could also assign the directive to md-option directly.
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.
May be This is a simple question but it is challenging for me.
In angularJS when i write {{}} in html code so i write code like this like
if i talk about dynamic id, we write like code this
<div ng-repeat = 'item in itmes track by $index'>
<div id = "div-{{$index}}">{{item.name}}</div>
</div>
If i use any model without {{}} i write this example
<input id = 'name' ng-model = "item.name"/>
whenever i am coding in angular js, i write code without {{}} then if it is not work then i try code with {{}} and vise versa. and randomly 1 will correct
Question is when i write code with {{}} and without {{}} in html code ?
After the OP explained what exactly was the problem.
So, the question here is very simple: when do we use {{}} and when we don't in the context of ng-model.
When you do a <input type=... ng-model="someModel>, what you're essentially telling Angular is: "Here is an input element; attach $scope's someModel variable to the value of this input element.
Now, you can use this in your JavaScript controller like so: $scope.someModel, but what about HTML? We have a templating language in Angular, and when you give it some variable (say someModel), it'll search its $scope for it, and then put in the value there. If it is unable to, it'll throw a nasty error.
In essence, {{}} GETS the value, without that, you generally set the variable to gold the value of something.
Very simply put, AngularJS thinks that the content within the brace is an expression, which must be resolved. Once it is, Angular puts the value of the resolved expression there. In the most basic of the terms, you just tell it: "Here is some expression; put the evaluated value instead."
In ES6, we call it template strings.
So, you'll use it for expressions which mutate after every iteration. Say, a loop or something. Places where you know what the answer is, or you have static content, you won't use it.
Say you have the following bit of code:
...
...
$scope.figureOne = 10;
in your controller.js and the following in its view file:
<div>My age is {{ figureOne }}</div>
Angular gets the value from the $scope, and puts it there; so, the rendered form will be: My age is 10. However, if you had the following
<div>My age is figureOne</div>
This time, Angular knows that there is nothing to evaluate or resolve, so, it'll just render it as it is: My age is figureOne.
I hope I made it clear! :)
Angular directives have different types of parameters. Some parameters (#) expect string values and some expect javascript expressions (=) (with variables bound to $scope).
There's no obvious way to know which parameter expects what type of value (aside from looking at documentation).
If a variable expects static string value and you have an angular expression
then you'll need to evaluate it by wrapping in {{}}
If there variable expects an expression and you have an expression
simply type that in.
It's the best to avoid using {{}} where possible, your dynamic ID will fail when Angular hasn't interpolated the expression yet, use ng-attr-id="div-{{$index}} for that. https://docs.angularjs.org/guide/directive#-ngattr-attribute-bindings
Another example, if you have a slow connection and Angular isn't loaded yet users will see the {{}}, you can avoid this by using ng-bind="".
See this thread for more info: AngularJS : Why ng-bind is better than {{}} in angular?
It is very simple.
{{something}} - used for one way binding(Static).
<input type="text" value="{{something}}">
Now if you change its value in HTML ,you can not get it by $scope.something in js.
but If you use ng-model="something",you can get its value in JS.
This happens because ng-model is two way binding.
<input type="text" ng-model="something">
Mostly We use ng-model for forms and {{}} to display static information like User details or else.
<div ng-repeat="type in (prepopulatingFieldData|prepopulateValue:'480edd03-cf94-e411-bd87-00155d005107')" >
<input id="applicationType" name="applicationType" ng-model="formData.applicationType" type="radio" ng-value="{{type.Name}}">
</input>
I want to set a value when the page load inside my angular controller. But the problem is when I set value inside it gives an exceptionlike this
Syntax Error: Token 'Member' is an unexpected token at column 9 of the expression [Student Member] starting at [Member].
My radio button values are
Student Member,
Limited Member,
Member
can any one help me.
You should use ng-value but not use the {{}} for evaluation.
Also - you don't need to provider "id" property when working with angular.
Here the problem is with ng-value. By using value instead of ng-value it worked well.. Thanks for the efforts you guys made.
You can't use brackets within the ng-value directive, it will throw the error you get. Try it without the brackets and it should work.
I am having an issue with Angular interpolation.
I have a directive template that looks like this:
<div class="autocomplete {{attrs.class}}" id="{{attrs.id}}">
<input type="text" {{attrs.autofocus | toAutofocusText}} ng-model="searchParam" placeholder="{{attrs.placeholder}}"/>
...
</div>
The problem I have is that this expression is not evaluated:
{{attrs.autofocus | toAutofocusText}}
However, if I change this to something like this:
x="{{attrs.autofocus | toAutofocusText}}"
It does get evaluated.
Could someone explain me why this would be happening? I am guessing it is something fairly fundamental, but I can't find anything on Google.
So the answer is that attributes don't get interpolated on that level. Or to be more specific, at the time when your HTML is compiled, angular processes DomElements. A Dom element with an attribute that starts with {{ isn't a valid attribute, which is why the $compile don't know about it. However, it does now about such expressions within attribute values, or Dom element contents.
Remember that angular is (they say) what html would be if written for applications. The data binding syntax is evaluated as html. Saying:
x="{{attrs.autofocus | toAutofocusText}}"
is different because now you are talking about an attribute's property being evaluated not some unknown characters inside an html element.
Another thing I would recommend is you look into using ng-class for manipulating the class stuff:
http://docs.angularjs.org/api/ng/directive/ngClass