I have defined $rootScope variable by using following code:
$rootScope.userDetails = function () {
$http.post($account + '/feedbackdiv')
.success(function (res) {
$rootScope.userData = res.userData;
});
};
$rootScope.userDetails();
Now, userData is accessible from everywhere. Now I tried to assign the userData.FirstName value to text field like this:
<input type="text" class="form-control museo_sans300" id="fName"
placeholder="First Name" name="fName" minlength="1" ng-model="fName"
ng-init="fName = userData.FirstName" required="required">
But this didn't initial value in the text field. I also checked that when I give static value to ng-init it works correctly, like, ng-init ="fName = 'test'" Furthermore I also verified that I am getting value of userData.FirstName. Please provide a solution to initialize this input text field.
There is no reference between fName and userData.FirstName after initial assignment fName = userData.FirstName. Also ngInit is not going to be run again on every digest loop. So when later userData.FirstName is populated primitive fName is not going to be updated. This is expected javacript behavior not related to Angular.
So you either use userData.FirstName directly as model:
<input type="text" class="form-control museo_sans300"
id="fName" placeholder="First Name" name="fName" minlength="1"
ng-model="userData.FirstName"
required="required">
Or you will need to manually set fName in controller once userData is loaded.
Related
I have written this code which detects if there is a value populated in productName field using javascript and then it parses and auto-populate the input field quantity. My code only works if productName field is populated through javascript code and fails to register keyboard inputs if I use onChange
I want to detect in both scenarios i.e javascript and keyboard, how do I detect using the keyboard in this code?
const input = document.getElementById('productName');
const descriptor = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(input), 'value');
Object.defineProperty(input, 'value', {
set: function(t) {
console.log('Input value was changed programmatically');
descriptor.set.apply(this, arguments);
document.getElementById("quantity").value=t
},
get: function() {
return descriptor.get.apply(this);
}
});
var i=0;
function changeInput(){
/* console.log(document.getElementById('productName').value) */
document.getElementById("productName").value=i++;
}
<input type="text" id="productName" name="productName" placeholder="product name">
<input type="text" id="quantity" name="quantity" placeholder="quantity">
<button onclick="changeInput()">Change</button>
Since I am a beginner in Javascript, a comment by #epascarello helped me, and this was quite easy with binding the input element:
document.getElementById("productName").addEventListener("input",(event)=>{
document.getElementById("quantity").value= document.getElementById("productName").value;
})
I wanted to pass the value of input field to another input field with its value via javascript. I wrote code as shown below.
First input:
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()"/>
Second input:
<input type="hidden" id="recipientHidden" name="recipientName"/>
Js Code
function recipient(){
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
When I open console, there is no value in the console. When I click on the first input field, value is printed.
How can I get it instantly ?
Your code works fine, but it will only log the value on key up. You can log the value immediately by calling the recipient() function right away:
function recipient() {
var recipientNameValue = document.getElementById('recipient').value;
document.getElementById('recipientHidden').value = recipientNameValue;
console.log(document.getElementById('recipientHidden').value);
}
// Call function straight away
recipient()
<input type="text" class="form-control" id="recipient" name="recipientName" value="RecipientName" onkeyup="recipient()" />
<input type="hidden" id="recipientHidden" name="recipientName" />
I have 2 input fileds lets say input1 and input2. I have event such that everything I type in input1 it shows in input2.
Now the condition is if i manually change or type something in input2 , the event i had created above should not work.
I guess need to use count loop but I am confused.
html code:
<input placeholder="Organization Name" [(ngModel)] = "orgName" (ngModelChange)="setdomain($event)">
<input placeholder="Business + Sub Domain" [(ngModel)] = "subdomain">
fragment of TypeScript file:
subdomain : string;
setdomain(name) {
this.subdomain = name.toLowerCase().replace(/ /g ,'');
}
I guess that the simplest way is creating temporary variable, which will store unique subdomain name and create method, which will be passing to the variable appropriate value. For example:
in *.component.ts :
defaultSubdomain: string;
uniqueSubdomain: string;
setdomain(name) {
let expectedResult = name.toLowerCase().replace(/ /g ,'');
this.defaultSubdomain = expectedResult;
}
setUniqueDomain(name) {
this.uniqueSubdomain = expectedResult;
}
and in *.component.html :
<input type="text" placeholder="Organization Name" [ngModel] = "orgName" (ngModelChange)="setdomain($event)">
<input type="text" placeholder="Business + Sub Domain" [ngModel] = "uniqueSubdomain || defaultSubdomain" (ngModelChange)="setUniqueDomain($event)">
I created Plunker for you. Tell me if that's what you meant.
cant you just the defaut value of input2 to that of input1. I think it should work.
<input placeholder="Organization Name" #input1>
<input value=input1.value placeholder="Business + Sub Domain">
I'm using the ajduke:bootstrap-tagsinput` package and I'm trying to store the array in:
$('#dealTags').tagsinput('items')
in my deals collection, but the value of:
$(e.target).find('[name=dealTags]').val()
comes back as undefined. I'm a newbie to Meteor and Javascript, so sorry if this is a dumb question. Here is the form field:
<div class ="controls">
<input id="dealTags" type="text" class="form-control" value="" placeholder="Add some tags..." data-role="tagsinput">
</div>
And here I try to insert the data to my collection in the Template
var deal = {
dealTitle: $(e.target).find('[name=dealTitle]').val(),
venueName: $(e.target).find('[name=venueName]').val(),
when: $(e.target).find('[name=when]').val(),
dealTags: $(e.target).find('[name=dealTags]').val()
};
And my collection method doing the actual writing to DB
Meteor.methods({
dealInsert: function(dealAttributes) {
check(Meteor.userId(), String);
check(dealAttributes, {
dealTitle: String,
venueName: String,
when: String,
dealTags: String
});
Thanks!
I think you need to use the select element instead of input to have val() return an array. (see documentation)
<div class ="controls">
<select multiple id="dealTags" type="text" class="form-control" value="" placeholder="Add some tags..." data-role="tagsinput" />
</div>
Another solution is to keep using the input element, but call .tagsinput('items') instead of val()
var deal = {
dealTitle: $(e.target).find('[name=dealTitle]').val(),
venueName: $(e.target).find('[name=venueName]').val(),
when: $(e.target).find('[name=when]').val(),
dealTags: $(e.target).find('[name=dealTags]').tagsinput('items')
};
This piece of code does not execute the code block inside the callback function for result():
var cityURL = '/myURL/path';
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
$('#city_id').val(data[1]);
$('#state_id').val(data[3]);
$('#state').val(data[2]);
}
});
the value of input#city_id and input#state_id does not change, but the value for #state does change. Both are hidden input right next to their field:
<input type="text" id="city" name="city"/>
<input type="hidden" id="city_id" name="city_id" />
<input type="text" id="state" name="state"/>
<input type="hidden" id="state_id" name="state_id" />
however, if I put an alert, the values change:
$('#city').autocomplete(cityURL, {
cachelength:0
}).result(function(event, data){
if(data){
alert(data[1]);
$('input#city_id').attr('value',data[1]);
$('input#state_id').val(data[3]);
$('input#state').val(data[2]);
}
});
why is this?
EDIT: Scratch that, the values do not change even with an alert:
As I suspected in my comment, it's just Firebug that's not updating properly. You shouldn't trust the input value attributes it shows as they're often out of date.
A reliable way to check input values is to just use JS and enter something like $("#foo").val(); in the console.