Angular populate input fields - javascript

I have a object that gets populated via a restful API in my root scope and then in my child scope I'm trying to populate some input fields.
child controller
$scope.profileForm = $scope.$parent.student;
this works and I can
console.log($scope.profileForm.FirstName);
but the input on my page does not populate?
<input ng-model="profileForm.FirstName" type="text" class="form-control form-control-first" id="first-name-input" placeholder="FIRSTNAME" required />
Any help would be great :)

Fixed! :) i Had
<form name="profileForm" ... />
which messes up the scope variable, duh!

Related

How to change one-time binding data in AngularJS?

I have a div which show details like mobilenumber, name etc. like {{::mobilenumber}}, {{::name}}
In that div, there is a button that renders the same values in the new form
By using the button in the form, the user can change the values but in the div where I am showing details, values don't change after clicking on the button
<form ng-submit="form.$valid && saveDetails()">
<input type="text" class="form-control capitalize" placeholder="Full Name" name="fullname"ng-model="address.fullname" maxlength="50" ng-trim="true" autocomplete="off" required >
<span><!-- Mobile Number required --></span>
<input type="text" class="form-control capitalize" placeholder="Mobile Number" name="mobilenumber" id="mobilenumber" ng-model="address.mobilenumber" ng-minlength="10" maxlength="12" ng-trim="true" autocomplete="off" required>
<span><!-- Mobile Number required --></span>
<button ng-click="form.submitted=true><span>Update User Details</span</button>
</form>
Do I want to use one-way binding only?
I tried using $scope.$broadcast('$$rebind:refresh'); but still values don't change.
Any help or guidance would be very helpful for me.
If you really want to keep some sort of one-way-binding...
What you could do, is just use two way binding but with a dataset in between. It gives some overhead but it is a possible solution to your problem. In order to update the view, you just update the copied data. You can control when the data in the view is updated.
When you use interpolation {{mobilenumber}} in your html, angular creates a watcher that watches the property mobilenumber on a scope:
$scope.$watch('mobilenumber', function() {
// update DOM
});
Whenever the value changes, DOM is updated.
However, if you use one time binding {{:mobilenumber}}, as soon as your callback receives truthy value, angular removes the watcher:
var unwatch = $scope.$watch('mobilenumber', function() {
if (value) {
// update DOM
unwatch();
}
);
And since there is no more watcher for mobilenumber, whenever you update values on the scope inside your saveDetails() method, the callback is not triggered and DOM is not updated.
If you're planning on updating values constantly, you should not use one time binding. Use regular bindings:
<div>{{mobilenumber}}</div>

knockout textinput modify observeable not updating text

i´m using textinput data-binding off the latest knockout version.
on an input like:
<input type="text" placeholder="name" data-bind="textinput:vm.found().term">
and it works just like a charme, problem:
when i modify the value with some other script like:
vm.found().term("somecontent")
the input does not change?
i need the value of the textinput to change when i change the observable
the doc says nothing about textInput
You should never have raw, deeply nested bindings like you have there. Assuming the found value has changed, it the text box will still be bound to the previous found object. You probably should be using a with binding somewhere.
<div data-bind="with: vm.found">
<input type="text" placeholder="name" data-bind="textinput: term">
</div>

In Meteor, how to make a form load prepopulated from a previously inserted object pulled from a MongoDB collection?

I just finished building a long-ish form field to let users input a lot of information. It has a bunch of text and number fields, some radiobutton sets, some checkboxes groups. It's being correctly stored in a Mongo collection, no problems.
Now I want to build a second routed page that will load the exact same html form, but I need to javascript to prepopulate all the fields with the previously added information pulled from the collection using the object id (passed via data context by the router).
I know this must be easy, but I'm not well versed in javascript yet, and the searches I did couldn't quite present me with a simple enough answer. Thank you!
Get the inserted document in a helper and use it in html to render the form details.
Template.templateName.helpers({
formData:function(){
return CollectionName.findOne({_id: documenteId});
}
})
<template name ="templateName">
{{#with fromData}}
<form id="detailsForm" method="post">
<label> Name </label>
<input type="text" id="" placeholder="name" value="{{name}}">
<label> Description</label>
<textarea id="" placeholder="Description" >{{description}}</textarea>
..
</div>
</form>
{{/with}}
</template>

Role of value="" in <input ng-mode ..>

Silly question, but can someone explain what is the use of value="" in the following context:
<input ng-model="something.name" value="" class="input-xlarge" />
What other options asides leaving value blank do I have. I thought it was related to input type = "text" or "password"
What BKM said about value. Use the model. But you can do better than only blanking the value. See this example from the AngularJS.org home page:
<input type="text" ng-model="yourName" placeholder="Enter a name here">
The cool thing about this is, when the value is blank, there is a useful message telling the user what information to provide.
In AngularJS value attribute for the input type not really matters anything. What all matters here is the ng-model. ng-model in AngularJS is similar to value in normal php forms. Its not really related to input type, even in AngularJS forms you have to specify the input type for the attribute like input type="text" or input type="email" or something.
value is not so important in AngularJS forms.

Angular.js: update binding after manual modification

I'm only starting to dive into angular.js and have found this issue that I can't seem to get around. Consider this simple code:
<input type="text" ng-model="test">
<input type="text" value="{{test}}">
When I write in the first field, the second one is updated nicely. When I write in the second field and then go back to the first one, the binding is not updated anymore. Interestingly though, the HTML attribute value does get updated - it's just not displayed.
Equivalent (at least roughly) code in vanilla javascript does not suffer from this:
<input type="text" id="model">
<input type="text" id="binding">
<script>
var model = document.getElementById("model");
var binding = document.getElementById("binding");
model.addEventListener("keyup",function() {
binding.value = model.value;
});
</script>
Here's a fiddle for you to test both: http://jsfiddle.net/Q6b5k/
Any idea why this happens when using angular.js and how to fix this?
[EDIT] Judging by the initial replies, it appears I have not made it clear. I do not want the second field to update the first one. The binding is to be one-way only, e.g. to allow filtering or even manual corrections (such as automatic creation of a URL alias in a blog post creation form). http://jsfiddle.net/Q6b5k/1/
The value attribute is only used when rendering the initial HTML. After the page load, everything else happens in the Angular Event Loop and therefore you need to do something that event loop can pick up. You can use ng-change for what you are looking to do:
<input type="text" ng-model="test" ng-change="test2=test.toLowerCase();" />
<input type="text" ng-model="test2"">
This happens because {{value}} does not create a binding, it is used for interpolation.
The simplest solution is to use ng-model in both the fields
<div ng-app>
Angular.js:<br>
<input type="text" ng-model="test">
<input type="text" ng-model="test">
</div>
Demo: Fiddle

Categories