I am new to javascript and angular so,i would appreciate your help, before I start plz have a look at below two pictures-
After some time there is a change-
Now some attributes in below HTML code has same attribute, -
<input type="text"
class="menuTitleField ng-pristine ng-untouched ng-valid ng-isolate-scope ng-valid-required"
ng-model="title" placeholder="Option Name" elastic-input=""
ng-required="isRequired" focus-on="newChild" focus-if="canFocus"
tabindex="0" required="required" style="min-width: 0px; width: 48px;">
For example, there are canFocus or title, in HTML and in above picture, so how can I get the value of canFocus, title using java script based on class name or tag name or event.target.id?
I think these values come from the sever, how can I get values of those attribute?
Plz, ask in comment for clarification, also edit the post for more precise question. thanks.
so how can I get the value of canFocus using java script
Use either:
$rootScope.canFocus
or
$scope.$root.canFocus
To use $rootScope,$scope in your controllers, you need to import it then you can use variables to get values like
$scope.title
$scope.canFocus
if you want to use $rootScope just use this
$rootScope.title
$rootScope.canFocus
In your HTML
title,canFocus should work with your code
Angular has an angular way of doing almost everything. In this instance I would suggest researching property binding. For example with the placeholder property you can write:
<input [placeholder]="someVariable">
Then declare the someVariable in your component and what ever you set it to will be the placeholder and you can access it that way. The [] lets you set it to a variable in your component and will update the placeholder whenever you change it in your component. I would try experimenting with this to get an understanding for how it works.
Related
I have an input in a form built with aura (Salesforce JS framework):
<input class=" input uiInput uiInputText uiInput--default uiInput--input" type="text" aria-describedby="5284:0" placeholder="" id="7:4790;a" data-aura-rendered-by="17:4790;a" data-aura-class="uiInput uiInputText uiInput--default uiInput--input" data-interactive-lib-uid="54" aria-required="true">
I need to change the value of this input using javascript.
However, when doing:
document.getElementById("7:4790;a").value = "random value";
Visually, it changes the value in the input, but it is not taken into account when saving as if I didn't change anything.
How can I achieve this ?
Do I need to trigger a specific event so that aura takes notice of the new data ?
You need to create an attribute of string type.
<aura:attribute name="myInputValue" type="String" />
Pass the attribute to the value property of the input tag.
<input .... value="{! v.myInputValue}" />
Now, whenever you want to change the value in the input, you can simply do this from your javascript function:
component.set('v.myInputValue, "My new String" />
Important Note: Salesforce frameworks don't allow DOM level manipulation due to a security architecture called Locker service. It is not advisable to follow DOM level Manipulation. Instead, follow the state-based approach like above.
I have used google place API following this tutorial but I am getting this error below:
Cannot find control with unspecified name attribute
I have tried also this all hint stackoverflow link
Code
<div class="form-group">
<input #search
type="text"
placeholder="search for location"
autocorrect="off"
autocapitalize="off"
spellcheck="off"
class="form-control"
[formControl]="searchControl"
name="searchControl">
</div>
You should post some code, we're not mediums !
But seeing your error, I would say you're using reactive forms, and you forgot to create your reactive forms.
This means on your input, you have [formControl]="" or formControlName="" attribute, which can't find the corresponding variable.
Could you post the related code of that please ?
Your HTML code looks fine for me, I think this has occurred because you have not initialized searchControl variable in the corresponding JavaScript/TypeScript file.
Add this line into your class in JavaScript/TypeScript file
searchControl = new FormControl();
I am doing something like this, where I am declaring selectors on the fly.
<div ngFor="let x of y;let i = index;">
<input *ngIf="i === 0" #selector0 type="number" value="{{item.value}}">
<input *ngIf="i === 1" #selector1 type="number" value="{{item.value}}">
</div>
Is there a way to do it like below, where I don't need to repeat myself?
<input #selector{{i}} type="number" value="{{item.value}}">
<button (click)="submit(selector0)">
I'm not looking for an alternative way to do it, just wondering if dynamic selectors are possible.
So we start here, where Angular defines these as a "Template Reference Variable":
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ref-vars
Okay, so let's try to find the source for that.
https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L34
https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L430
So we're trying to parse out the element... lets see how it defines that:
https://github.com/angular/angular/blob/master/modules/%40angular/compiler/src/template_parser/template_parser.ts#L16
I'm going to put a breakpoint and see what's up.
EDIT:
I put a breakpoint in the "_parseAttr" function to see what it sees when it looks at the template reference:
Here is the call to find the binding:
var hasBinding = _this._parseAttr(isTemplateElement, attr, matchableAttrs, elementOrDirectiveProps, animationProps, events, elementOrDirectiveRefs, elementVars);
And what the debugger outputs for the attribute name:
attr = Attribute {name: "#testerno{{check}}", value: "", sourceSpan: ParseSourceSpan, valueSpan: undefined}
So it looks like the attribute name name: "#testerno{{check}}" is not parsed to see if {{check}} is an angular variable, it just interprets that as part of the string.
Therefore, you cannot do what you put above. It thinks the reference name is "#testerno{{check}}" in this case.
Or, in your case, selector{{i}}.
Note that this makes sense because the "#" is used at the compiler level and is not present in your output html, so it would have no way of dynamically creating that reference.
Assign it to a data attribute, then you can use javascript's querySelector.
<input attr.input="{{i}}" type="number" value="{{item.value}}">
This is my Editor input tag:
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
When binding my $scope variable with ng-model then it returns undefined. and when I bind my $scope variable with ng-bind-html then still the same result. So then I gave an Id to this textarea and accessed the value inside of it by using this statement.
$scope.TemplateDescription = $sce.trustAsHtml($("#templateDescription").val());
I get the values as shown in the image below, so how can I get my required html text in my modal so that I can pass this value to save into database. Any kind of help will be appreciated.
If your TemplateDescription variable is containing raw HTML then you can try something like this.
First you need to set your raw HTML as trusted.
$scope.TemplateDescription = $sce.trustAsHtml($scope.TemplateDescription);
And then you need to bind TemplateDescription using ng-model
<textarea cols="18" rows="40" class="wysihtml5 wysihtml5-min form-control" ng-model="TemplateDescription"></textarea>
I have tested it. It will work.
I'm a big fan of angularjs, I started lately to use it in all of my 'coding for fun' projects.
I have a big curiosity:
I have a two inputs, one disabled by a ng-disabled directive and the other disabled with an html tag (A better illustration in this link):
//...
<input type="text" disabled value="This is an html input text disabled" />
<input type="text" ng-disabled="true" value="disabled with angular js directive" />
//...
Using the browser ability I can right click on the input and remove the disabled and ng-disabled tags but only the one with the disabled tag would be editable, the other one will still be tracked by angular even when ng-disabled directives has been removed.
So, When and Why should I prefer using ng directives over native html tags? Which could be the impact of letting angular track all these actions? is it really worth to use it everywhere?
Use the native html 'disabled' if the element should always be disabled. (static, for example if you want to provide an input with text and never let the user change it)
Use angular if it should change based on variables value in the scope.
For example, say a button should change the state of an input.
<input type="button" ng-click="inpDisabled = true" >Disable Input</input>
<input type="text" ng-disabled="inpDisabled" />
live example
No harm will come if you still use ng-disabled="true" but it's redundant.
If you want to make directive static, you shoud use native html
<your-tag disable><your-tag>
against
<your-tag ng-disabled="true"><your-tag>
But AngularJS does not work this way, you shoud initialize your application and controller, then pass a variable as parameter to your directive:
JS:
$scope.isDisabled = true;
HTML:
<your-tag ng-disabled="isDisabled"><your-tag>
You shoud read more tutorials to make things clear