I am saving my data in below format
$scope.data = {
name:'abc',
Address:[{
Address1:'XXXX',
state:'XXXX',
County:'XXXX'
}]
}
<input type="text" class="form-control" name="Address1" ng-model="data.Address[0][Address1]">
<input type="text" class="form-control" name="state" ng-model="data.Address[1][State]">
<input type="text" class="form-control" name="County" ng-model="data.Address[2][County]">
While retrieving the data I am getting data in below format:
$scope.data = {
name:'abc',
Address:[{
state:'XXXX',
County:'XXXX'
}]
}
Where one of the array objects (Address1) is missing so I am unable to update the form model even if the data is available. Is there any workaround to solve the above issue?
Change your input model to index 0, because that's the array item you are targeting. After that change your reference to the . notation and not using brackets []. You can use the brackets, but make sure to make them strings, like data.Address[0]['Address1']. But it's not necessary here. Also:
<input type="text" name="Address1" ng-model="data.Address[0].Address1">
<input type="text" name="state" ng-model="data.Address[0].state">
<input type="text" name="County" ng-model="data.Address[0].County">
(removed class for simplicity)
(are you using state or State?)
Related
I have a method that is toggling between two inputs.
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
}
<a ng-click="$ctrl.toggleModToLod(configurableOption)" ng-init="">MOD or LOD</a>
<input ng-if="configurableOption.isModField" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="!configurableOption.isModField" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
It works fine, but if i had before filled the MOD field and after that i changed to LOD field the request contain both values, is there any way to have in my request only the selected value from the selected input ?
You can make the switch a toggle or checkbox or other form element
<label><input type='radio' ng-model="value.which" value='MOD' /> MOD</label>
<label><input type='radio' ng-model="value.which" value='LOD' /> LOD</label>
<input ng-if="value.which=='MOD'" type="text" class="form-control" ng-model="value.mod" placeholder="MOD">
<input ng-if="value.which=='LOD'" type="text" class="form-control" ng-model="value.lod" placeholder="LOD">
Then when you send your request, you'll have the which variable which will tell you which value to use. Additionally, you'll have a built in switcher that will automatically work by setting value.which
just clear both values from model everytime you toggle:
toggleModToLod(configurableOption) {
console.log(configurableOption);
configurableOption.isModField= !configurableOption.isModField;
$scope.value.mod = undefined; // however you're setting these on the controller / directive
$scope.value.lod = undefined;
}
I have multiple input fields under different headings:-
<label>User</label>
<input type="text" ng-model="a.arr.username"/>
<input type="text" ng-model="a.arr.userdob"/>
<input type="text" ng-model="a.arr.userpanNo"/>
<label>Employee</label>
<input type="text" ng-model="a.arr.empname"/>
<input type="text" ng-model="a.arr.empdob"/>
<input type="text" ng-model="a.arr.emppanNo"/>
<label>Daily Workers</label>
<input type="text" ng-model="a.arr.dwname"/>
<input type="text" ng-model="a.arr.dwdob"/>
<input type="text" ng-model="a.arr.dwpanNo"/>
I want to save above data in the format:- [{a.arr.username:any value,a.arr.userdob:any value,a.arr.userpanNo:any value},{a.arr.empname:any value,a.arr.empdob:any value,a.arr.emppanNo:any value},{a.arr.dwname:any value,a.arr.dwdob:any value,a.arr.dwpanNo:any value}].
In my directive:-
scope.a.array=[];
var properties = Object.keys(scope.a.arr);
for(var i=0;i<properties.length;i++){
scope.a.array.push({});
scope.a.array[scope.a.array.length - 1][properties[i]] = scope.a.arr[properties[i]];
};
But above code is creating data like this:- [{a.arr.username:any value},{a.arr.userdob:any value},{a.arr.userpanNo:any value},{a.arr.empname:any value},{a.arr.empdob:any value},{a.arr.emppanNo:any value},{a.arr.dwname:any value},{a.arr.dwdob:any value},{a.arr.dwpanNo:any value}]
It is pushing different properties in array instead of combining them. What is the correct way of doing this?
Trying to figure out form related angular technique. Im new to angularjs and started digging deep into it.
Well im trying to get current and permanent address in a form. When the "same as current" checkbox is checked then value of current address field is written in permanent address field ng-value.
While permanent address field is typed first and then we checked "same as current" not overwriting field from current address ng-value.
Current Address field
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="current_address_line1" ng-model="contacts.current_address_line1" placeholder="House Number">
checkbox :
<input type="checkbox" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
Permenent Address :
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" ng-value="contacts.current_address_line1" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" ng-if="!sameascurrent" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Any help would be appreciated.
http://plnkr.co/edit/rX3iT5lX2JEIArvxL8SK?p=preview
Move overwriting logic to controller. For permanent address use similar inputs as for current (no ng-value only ng-model) plus ng-disabled.
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
<input type="text" class="h-textform form-control" id="exampleInputEmail3" name="permenent_address_line2" ng-model="contacts.permenent_address_line2" ng-disabled="sameascurrent" placeholder="Street Name">
Add ng-change to checkbox input:
<input type="checkbox" ng-change="change()" value="disable" checked="checked" ng-model="sameascurrent">Same as Current
and function called when checkbox is changed in controller. This function overwrites model of permanent address if sameascurrent is true.
$scope.change = function () {
if ($scope.sameascurrent) {
$scope.contacts.permenent_address_line1 = $scope.contacts.current_address_line1;
$scope.contacts.permenent_address_line2 = $scope.contacts.current_address_line2;
}
}
See http://plnkr.co/edit/aEuG62gaUh5U4Xl5ZUTv?p=preview
<input type="text" class="h-textform form-control" ng-if="sameascurrent" id="exampleInputEmail3" !!ng-value="contacts.current_address_line1"!! name="permenent_address_line1" ng-model="contacts.permenent_address_line1" ng-disabled="sameascurrent" placeholder="House Number">
Remove ng-value from input. Ng-value is used to set values like objects to the radio box or smth like this.
UPD: Just remember. When you are using ng-model, this means that value from input will be dynamicly set to the your model. So you can bind it from model to anywhere you wont
ng-value just set the filed once, for realtime data clone,you can write your own $watch method inside the controller:
function sync(){
if($scope.sameascurrent){
var contacts = $scope.contacts;
contacts.permenent_address_line1 = contacts.current_address_line1;
contacts.permenent_address_line2 = contacts.current_address_line2;
}
}
$scope.$watch('contacts',sync,true);
$scope.$watch('sameascurrent',sync);
http://plnkr.co/edit/EPoprBLeNxlwDlklWuiC?p=preview
For more detail on $watch, you can refer angular docs for $scope
Being very new to Angular I have a kinda unusual request.
I have a bunch of input fields
<div class="blurb" ng:repeat="item in fieldData.postData">
<input type="text" class="form-control" ng-model="item.key" />
<input type="text" class="form-control" ng-model="item.operator" />
<input type="text" class="form-control" ng-model="item.value" />
</div>
The values of these fields inturn are bound to another field
<input name="finalVal" type="text" ng-model="fieldData.postData" />
All works fine and I get an object inside finalVal, but I want the object in string format. Is there a way to achieve it without any changes in my controller? The reason being finalVal is basically stored as a string in DB and I cannot modify the data type.
Appreciate the help
Here is the Plunker that describe my problem with dynamic binding in Angularjs.
http://plnkr.co/edit/fGgtOZ5IrJVo9QasQALc?p=preview
Before using Angularjs, I am used to using the input name/value like the following to generate desirable data structure for back end processing
<input type="text" name="computer[details][][purchaseddate]" />
<input type="text" name="computer[details][][warrantyperiod]" />
With Angularjs ng-model, it is possible to bind a complex data structure like
<input type="text" ng-model="computer.parts[0].name" />
However it does not work with dynamic property like the following:
<input type="text" ng-model="computer.details[0].name" />
Angular keeps telling me that I am trying to set property 'name' to undefined 'details[0]', I am aware of that but are there any ways to get the same behavior with previous input's name/value where I can specify dynamic property without having to declare it first?
Thank you,
Binding to attributes that don't exist yet works. You can bind to a.b.c even if $scope.a does not exists. Angular creates the objects and attributes on-the-fly.
<input type="text" ng-model="a.b.c" />
But you are trying to bind to an array element that does not exist yet:
<input type="text" ng-model="a.b[0].c" />
Angular would have instantiate the array and then push an empty object in it and then assign it's name. Apparently this does not work.
I ran into the same situation and tried everything.
This is how I was able to get dynamic values inside 2 deep ng-repeat:
JS:
$scope.newContact = {
name: [],
phone: [],
email: [],
notes: []
};
$scope.saveNewContact = function (idx) {
console.log($scope.newContact.name[idx]);
};
HTML:
<input type="text" ng-model="newContact.name[$index]" />
<input type="text" ng-model="newContact.phone[$index]" />
<input type="text" ng-model="newContact.email[$index]" />
<input type="text" ng-model="newContact.notes[$index]" />
<button ng-click="saveNewContact($index)">Save</button>