I have an update function and a number of input boxes. Each input has an ng-blur attached to it so that the update function is called whenever the cursor leaves the box.
$scope.update = function(data) {
console.log(data); //outputs value in the textbox
//how can I output/access the key?
}
The input for name look like this:
<input type="text" ng-model="user.name" ng-blur="update(user.name)"/>
As I need to be able to post a JSON object in the form {"name" : "bob smith"} what's a good way of generating the "key" of the object bearing in mind that it will differ depending on the input box that's being used at the time?
EDIT ↓
I have made this jsfiddle to illustrate a way to do it more cleanly & that would scale more easily: http://jsfiddle.net/kuzyn/k5bh0fq4/5/
EDIT ↑
Why not simply pass a second string argument? It's not a fancy way to do it but it would work:
<input type="text" ng-model="user.name" ng-blur="update(user.name, 'name')"/>
And
$scope.update = function(data, key) {
console.log(key, data);
}
It might be a little more work but it is much more scalable. You could make use of the ng-form and naming your form inputs. By naming your form and inputs, you are creating a form reference on your scope via $scope[form-name]. Each named input within that form then sets an input reference via $scope[form-name][input-name].
I'm coding this in coffeescript (to preserve my sanity, sorry)
form
<form name="myForm">
<input name="name" ng-model="user.name" ng-blur="update(user)"/>
<input name="email" ng-model="user.email" ng-blur="update(user)"/>
<input name="other" ng-model="user.other" ng-blur="update(user)"/>
</form>
update & save func
# key is what changed in case you need to do something special on the put call to server
$scope.save = (data, key)->
# pseudo-code
$scope.update = (data)->
for name, input of $scope.myForm
if input?.$dirty
$scope.save data, name
break
docs - https://docs.angularjs.org/guide/forms
codepen - http://codepen.io/jusopi/pen/LGpVGM?editors=101
Related
Hi i have inputs like this
<input type="text" ng-model="tbl.Public">
<input type="text" ng-model="tbl.Private">
<input type="text" ng-value="tbl.Public--tbl.Private" ng-model="tbl.Total">
the above form will working fine it will sum the Public and Private value and put it in tbl.Total field. My problem is in edit form where value of tbl.Total, tbl.Public, tbl.Private are assign from database.
js
$scope.tbl.Public=10;
$scope.tbl.Private=25;
$scope.tbl.Total=35;
now after assigning a value from js when i change value of tbl.Public or tbl.Private in form it is not affecting a tbl.Total it should sum the two value and put it in tbl.Total field.
Thank you for your any help and suggestion.
ng-value is usually used on radiobuttons and option elements, it's not a good fit for your use case.
A better thing to do would be implementing an updateTotal() function combined with ng-change. I would also recommend changing your input types to number so you're not allowing users to sum text.
<input type="number" ng-model="tbl.Public" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Private" ng-change="updateTotal();">
<input type="number" ng-model="tbl.Total">
In your controller:
$scope.updateTotal = function() {
$scope.tbl.Total = $scope.tbl.Public + $scope.tbl.Private;
}
It should be like this to prevent from concatenate
$scope.updateTotal = function() {
var Public = Number($scope.tbl.Public || 0);
var Private = Number($scope.tbl.Private || 0);
$scope.tbl.Total = Public + Private;
}
I have a requirement in angular js application where I need to dynamically create hidden variables. Name and value attribute for these hidden fields will be from database. But rather than storing actual value of hidden field in database name of model is stored in a database.
I have written a test function as follows. TempVars will be from database but for time being I have hard coded few values.
$rootScope.populate = function () {
$rootScope.models = {
MyModel: {}
};
$rootScope.models.MyModel.Client = [];
$rootScope.models.MyModel.Client.FirstName = 'FName';
$rootScope.models.MyModel.Client.LastName = 'LName';
$rootScope.TempVars = [
{"key":"var-FirstName","value":"{{models.MyModel.Client.FirstName}}"},
{ "key": "var-LastName", "value": "{{models.MyModel.Client.LastName}}" },
]
};
Following is my HTML code
<input type="hidden" ng-repeat="obj in TempVars" name="{{obj.key}}" value="{{obj.value}}" />
<input type="text" ng-repeat="obj in TempVars" name="{{obj.key}}" value="{{obj.value}}" />
<input type="hidden" name="test" value="{{models.MyModel.Client.FirstName}}" />
I am expecting that hidden filed value should have FName and LName in it. But rather it contains {{models.MyModel.Client.FirstName}} and {{models.MyModel.Client.LastName}} in it. Whereas variable name with name test has FName value stored in it.
Is is possible to achieve this in angularjs?
It won't work that way in angularjs but you will be able to do that through a custom directive and using NGModelController to $format and $parse the data.
Here are some links where you can get the idea about that :
https://egghead.io/lessons/angularjs-using-ngmodel-in-custom-directives
http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/
using angularJS 1.5.0-beta2
I'm wondering if its possible to paste the text input value using onkeyup.
for example:
<input type="text" id="foo" on-keyup="doit(<text-input-value>)" />
so in the doit function i need to paste the value of the text input.
any ideas?
If you just want the one key that was pressed then use String.fromCharCode() to find which key it is from the event keyCode.
$scope.showKey = function(event){
var pressedKey = String.fromCharCode(event.keyCode);
alert(pressedKey);
}
If you want to get all of the contents of the text input it would be better to use ng-model and ng-change together.
<input type="text" id="foo" ng-model="myInputValue" ng-change="doSomething()"></input>
var doSomething = function(){
alert($scope.myInputValue);
};
I have a data object that looks like this:
$scope.data = { value1: 'anyValue', value2: 'anyValue'};
This data object will be updated via polling every second.
In the view I'm showing the data in input fields like:
<input type="number" ng-model="data.value1"/>
<input type="number" ng-model="data.value2"/>
The user should be able to focus one of the input fields and enter a value. Now this is not possible, because every change that is made in the field will be overwritten, when the data object gets updated.
I don't want to pause the whole polling process, because the other input field should still show its updated value.
What is the best way to pause only the binding of the focused input field, while it is focused?
I suggest you do the following:
<input type="number" ng-model="data.value1" ng-focus="onFocus('value1')" ng-blur="onBlur('value1')"/>
<input type="number" ng-model="data.value2" ng-focus="onFocus('value2')" ng-blur="onBlur('value2')"/>
In your controller, something like:
$scope.onFocus = function(key) {
$scope.preventChange = key;
};
$scope.onBlur = function(key) {
$scope.preventChange = null;
};
And then whenever you do your polling and updating, check if the data key you are trying to update is the one in $scope.preventChange, and if so - don't change it.
I have a form that contains a lot of fields and I want to post all the form fields to a service using a post method. But I would like to send the whole form object and not to write one property by one. If I try to post the object that contains all my fields $scope.formData it also contains all the angular stuff inside like errors. What I need is a collection of field names and values. How can I achieve this with minimum coding?
Edit:
I ended up writing my own function:
function getAngularFormFields(form) {
var dictionary = { form: {} };
for (var key in form) {
if (form.hasOwnProperty(key) && !key.indexOf('$') == 0) {
dictionary.form[key] = form[key].$modelValue;
}
}
return dictionary;
}
Normally if you need to post a form you could just use the default method provided by your browser. This will send the form data, via POST, to your URL.
<form action="yourUrlHere" method="POST">
First name: <input type="text" name="fname">
Last name: <input type="text" name="lname">
<input type="submit" value="Submit">
</form>