case:
I need to bind an input field with a specific hidden field, and I want to refer to it by ID because I have many of those input vs hidden input in my page.
Something like this:
HTML:
<input type="text" ng-model="item.name-{{item.ID}}" >
<input type="hidden" name="item_name" value="{{item.name-{{item.ID}}}}" >
Item will be an object, where it looks like this:
$scope.item = {ID: '11111', name:'itemname'}
The item name can be edited through this input field where we will insert the name and it will be binded to a hidden field to be submitted with the form.
Thank you.
You can create another object for storing key-value pairs with data from your dynamic inputs. I think this approach is more cleaner.
<input type="text" ng-model="itemsValues[firstItem.name + '-' + firstItem.ID]" >
<input type="hidden" name="item_name" value="{{itemsValues[firstItem.name + '-' + firstItem.ID]}}" >
Demo on plunker (with three inputs).
Related
In AngularJs 1.x want to print all the ng-Model names in controller. In my application form has more than 100 input fields. Then my application one of the part, I have to declare all the input names into server side even few variable value is empty. So if I get ng-model names easy way to declare the variables.
For Example :
<div controller="IndexController as form">
<form name="myform">
<input type="text" data-ng-model="form.name" name="name"/>
<input type="text" data-ng-model="form.email" name="email"/>
<input type="text" data-ng-model="form.mobile" name="mobile"/>
</form>
</div>
Ouput: name, email, modile
You're best wrapping your ng-model in a scope object.
For example:
<input type="text" data-ng-model="form.details.name" name="name"/>
<input type="text" data-ng-model="form.details.email" name="email"/>
<input type="text" data-ng-model="form.details.mobile" name="mobile"/>
A model is just an object with key:value properties.
You can use the Object.keys to get an array of all properties keys and iterate on them, like below..
var keys = Object.keys($scope.details);
for(var i = 0; i < keys.length; i++){
console.log(keys[i]);
}
Consider you form model is like this:
let form = {"email": "abc#xyz.com", "fname": "abc"};
You can make use of for ... in loop.
The for...in statement iterates over the enumerable properties of an
object. For each distinct property, statements can be executed.
for (let i in form) {
console.log(form[i]);
}
OUTPUT
abc#xyz.com
abc
I am creating template including TypeaHead boxes using ng-repeat on the basis of json data and I am giving dynamic model names to the boxes. My html part for TypeaHead box is:-
<div ng-if="object.typeahead != undefined">
<label style="float:left;">{{ object.label }}</label>
<input class="form-control" type="text" ng-model="selectedTypeaHead[$index]" disabled/>
<input class="form-control" type="text" typeahead-on-select="setType($index, $item)" ng-model="selected" typeahead="val.value for val in values | filter:$viewValue" />
</div>
Now, in my controller I want to insert the selected value of select box into the input box: selectedTypeaHead[$index] not selectedTypeaHead. Please help me. Thanks in advance.
$scope.setType = function(index, item) {
alert(index);
$scope.selectedTypeaHead = item.value+','+item.id;
}
Hi I want to add two field and put in another field
<input type="text" ng-model="pfi.value1">
<input type="text" ng-model="pfi.value2">
<input type="text" ng-model="pfi.sum" >
its working fine in label
<label>{{ pfi.value1 + pfi.value2}}</label>
but how to do same thing in text field
You should set pfi.sum = pfi.value1 + pfi.value2; inside your controller. I'm not positive what the two-way binding would do if you then edited the text field attached to pfi.sum, but I suspect it wouldn't be good. However, for display purposes, this should work.
You can do it in the template
<input type="number" ng-model="pfi.value1">
<input type="number" ng-model="pfi.value2">
<input type="number" ng-model="pfi.sum" >
<p>{{ pfi.sum = pfi.value1 + pfi.value2}}</p>
The $interpolation service evaluates the exoression on each change to the inputs and updates the sum.
The DEMO on JSFiddle.
you should do it on the controller
pfi.sum = pfi.value1 + pfi.value2
also,you need to add the controller to your html file.
you should do that operation in your controller,
assuming you are using pfi for controllerAs attribute?
x.controller('xctrl', function() {
var pfi = this;
pfi.sum = pfi.value1 + pfi.value2;
});
In Angular JS are created inputs.
<input type="text">
<input type="text">
How I can to get values from each inputs and send to server?
I tried:
<input type="text" ng-model="typeInput">
But I get value only one field.
In server I am planning to get data format: $_POST['type'][0] = 'One value'; $_POST['type'][1] = 'Two value';
I mean, that I need send to server array of values. For example:
name="type[]" value="1"
name="type[]" value="2"
name="type[]" value="3"
So, in server I cando loop for check:
foreach($_POST['type'] as $val){
//prepare
}
Using the ng-model binds it to the property of the same name in the $scope of the controller.
You would access it in your controller like so:
$scope.typeInput
Or you can access it in your HTML like so:
{{typeInput}}
To access both fields, you would need to give them both a different property name to bind to.
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
...
alert($scope.firstName);
alert($scope.lastName);
More complete info here: https://docs.angularjs.org/api/ng/directive/ngModel
Edit: Here's an example fiddle with binding your inputs to an array: https://jsfiddle.net/gxmw62rj/2/
Using ng-repeat I display some radio's in the edit form:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
As you can see, I've applied the 'dot practice'. The edit form is a pop-up over my detail form. In my detail form I have this:
<tr>
<td>Gender:</td>
<td>{{ customer.Gender.Description }} </td>
</tr>
All my bindings in the edit form are working, but I can't get the gender binding to work. I think it has something to do with scope inheriting by the use of ng-repeat.
I've also tried to use $parent, but the outcome remains the same:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
Setting the initial value works. When a female is set, the female radio is selected and when it is a male, the male radio is selected.
A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.
Edit: I've created a Fiddle to illustrate my issue.
One solution is to use ng-value(which evaluates its content as an expression) and set it to the whole gender object, and set ng-model to the Gender object on your FormData. This way, when you change the input, the gender object is set to FormData.Gender and you have access to both Id and Descr.
<label ng-repeat="gender in genders">
<input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender">
{{gender.Descr}}
</label>
http://jsfiddle.net/ADukg/3194/
If you just want the Id in the model, you can use: (value evaluates its content as a string)
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id">
{{gender.Descr}}
</label>
And in the controller:
$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};
http://jsfiddle.net/ADukg/3195/
Strangely enough, it doesn't work when you set value and model to Id, but initially bind a whole gender object to the gender model. Weird!
I can't explain it 100% accurately. But you have too many nested objects in your scope!
Look at this example (fiddle: http://jsfiddle.net/ADukg/3193/)
<div ng-controller="MyCtrl">
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}}
</label>
</div>
function MyCtrl($scope) {
$scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}];
$scope.selectedGenderId = $scope.genders[1].Id;
$scope.$watch('selectedGenderId', function(newValue, oldValue) {
console.log("selectedGenderId=" + newValue);
// TODO: set it into FormData?
});
}
If you set the "selectedGenderId" directly it will also be set correctly.
I think the selection problem has nothing to do with the binding directly but with the scope and nesting of scopes via the many objects.
Take also look at this explanation:
http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
The problem lies with the binding on the radio buttons. You are binding on the customer.FormData.Gender.id model - note it is the id property that you bind to and not the Gender property.
Thus, when you select the radio button for Male, only the ID on the gender is changed - not the Descr field. This explains clearly the behaviour. When you select different radio buttons, notice how only the ID gets updated and not the Desc.
To change the Descr field as well, you will be wise to have a dedicated model for the radio buttons and then respond to changes to this model.
This is demonstrated in this fiddle.