I'm trying to add more than one array input and a button that will create new inputs.
I have four arrays vm.work_place[], vmwork_year_start[], vm.work_yead_end[], vm.work_why_left[]. What I want is to create new input everytime I click on a button, and another button that will remove the input.
<button ng-click="vm.work_place.push(' ');vm.work_year_start.push(' ');vm.work_yead_end.push(' ');vm.work_why_left.push(' ');">Add row</button>
<tr ng-repeat="x in vm.work_place">
<td>
<input name="work_place[]" ng-model="vm.work_place[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_year_start[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_yead_end[$index]"/>
</td>
<td>
<input name="work_place[]" ng-model="vm.work_why_left[$index]"/>
</td>
<td>
<button ng-click="vm.work_place.splice(index, 1);vm.work_year_start.splice(index, 1);vm.work_yead_end.splice(index, 1);vm.work_why_left.splice(index, 1);">Remove row</button>
</td>
</tr>
But the problem is that the code above gives me a ngRepeat:dupes Error when I click on the add new row button.
How can I create more than One input at the same time, ie. to add an Item on all four arrays?
ngRepeat:dupes this error comes when you iterate in a array with duplicate values.So i guess you would be getting error while adding row second times. because already vm_worksapace has ' ' as data when first row is added and when you click again ' ' is added again so there is duplicate value now and ng-repeat will give you eror.
To make this work with duplicate value
replace <tr ng-repeat="x in vm.work_place" > with <tr ng-repeat="x in vm.work_place track by $index" >
Related
I am using the ng-repeat to create the input fields dynamically, everything seems to be working fine and the input fields are created but due to some reason when I enter some value into that created input field then due to two-way data binding the value is entered simultaneously in all the text fields that were created.
As per my knowledge, I am assigning the different ng-model to each of the created fields so I am not sure why the values are being copied. When I try to print the values which are assigned to the input field just above the field then I see the id is different wanted to know why all the fields are taking the same value and also how can I prevent it.
HTML Code:
<tr>
<td ng-repeat="extension in ExtensionList">
<!-- Here the value displayed are different -->
{{ formdata.extension.ExtensionVlaues }}
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
</td>
</tr>
Here is the screenshot from the front-end:
Here is the example of my ExtensionList: {"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}
As per my knowledge, the given ng-model is different but still not working. Can anyone please help me with this? I tried few things like ng-model="formdata.extension[ExtensionVlaues]" but still no luck.
I tried to assign ng-model like this but it is not working:
ng-model="formdata.extension[ExtensionVlaues]"
Based on the below answer I tried 2 different things it but it's not working and getting the same issue. Please let me know how can I resolve this:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.key">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>
You are trying to use ExtensionList as an array. You need to use it as an object with ng-repeat:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][key]">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>
Just incase anyone else also struck at this issue:
<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
<br/>
<span>
{{ extension.NameSpace + ":" + extension.LocalName }}
</span>
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>
I am prompting for a file name in an ng-repeat loop:
<tr ng-repeat="candidate in candidates.details">
<td style="text-align:left"><input type="text" ng-model="candidate.name" placeholder="Candidate's name" autofocus ng-change="CandiateNameOrDescriptionChanged()" /></td>
==> <td style="text-align:left"><input type="file" accept=".doc,.docx,.pdf" id="csvFileSelector" file-change handler="CvSelected(candidate, files)"></td>
<td style="text-align:left"><textarea ng-model="candidate.description" placeholder="Descriptive text" ng-change="CandiateNameOrDescriptionChanged()" ></textarea></td>
<td style="text-align:left"><button type="button" class="btn btn-outline btn-success" style="margin-left:10%" ng-disabled="candidate.name=='' || candidate.cv==''" ng-click="DeleteCandidate($event, candidate)">Delete</button></td>
<td> </td>
</tr>
My AngularJs handler for file selection checks for file extension being doc, docx or pdf and, if not, shows an alert.
I would also like it to reset the selected file name, showing it as blank.
This question shows how to do it, but it clears all input file names.
How can I clear only the one with the invalid extension (it is always the last)?
I am thinking of adding an element Id, based on some loop index (unless I can directly address the last such input), but am unsure of quite how to go about it.
Example Code:
<table>
<tr>
<td>Class</td>
<td> Input one </td>
<td> Input two </td>
<td> Total </td>
</tr>
<tr ng-repeat= "x in records">
<td>My {{x.class}} </td>
<td><input type="tel" ng-value="x.tel" ng-model="telephone"></td>
<td><input type="tel" ng-value="x.inone" ng-model="inone"></td>
<td><input type="tel" ng-value="x.intwo" ng-model="intwo"></td>
<td><input type="tel" ng-value="x.total" ng-model="total"></td>
</tr>
<tr>
<td colspan="5" class="text-center"> <input type="button" value="Save" ng-click="mydata(records)"> </td>
</tr>
</table>
Initially ng repeat records contains only details part bydefault.
$scope.records = [
{
"class" : "Personal",
},
{
"class" : "Socail",
},
]
After submit, angular dynamically add those field which filled by user
Intially User will see only
1.Class part with 3 blank input field for inone, intwo and total and one blank telephone field.
What I want
1.There should be validation to telephone field of
A. Personal class which allow only 6 digits, and
B. for Social class it should allow 10 digits.
The range for entering value in Personal's inone field is 0-10 and intwo field is 11-30.
The range for entering value in Social's inone field is 30-40 and intwo field is 40-60.
4.Total field should calculate total of whatever entered in inone and intwo model of there respective class .Note that total field is generated from ng repeat so we cannot directly make total.
What about something along the line ...
<td ng-if="x.class=='Personnal'"><input type="tel" ng-maxlength="5" ng-model="x.inone" ng-change="x.total=x.inone+x.intwo"></td>
<td ng-if="x.class=='Social'"><input type="tel" ng-maxlength="5" ng-model="x.inone"></td>
<td ng-if="x.class=='Personnal'"><input type="tel" ng-minlength="11" ng-maxlength="15" ng-model="x.intwo" ng-change="x.total=x.inone+x.intwo"></td>
<td ng-if="x.class=='Social'"><input type="tel" ng-minlength="16" ng-maxlength="20" ng-model="intwo"></td>
Tu sum it up :
ng-value is useless, bind your data directly to x.[value]
use ng-if to switch between the different classes
use ng-minlength/ng-maxlength for the validation
use ng-change to recompute total everytime, you may want to add a readonly/disabled flag in the total field. If total is not a string concatenation, use a function that will be called in your controller for the proper conversion and sum it up.
I'm using AngularUI's ui-mask directive to mask phone numbers. We'd like to save both the masked and unmasked value to the database.
I see the docs have the option to use the model-view-value="true" to store the $viewValue as the model giving us the masked value.
However since we'd like both I'd prefer a way to leave this false and access the $viewValue on my own. I see in the demo however this is for a single input. It looks like it is bound to the name of the inputs.
My issue is this is a ng-repeat and so the names vary. I got it working for a single item (you can see in the first table it works).
The last <td> is where I'm trying to show the $viewValue. I'm also trying to pass it in to the setPhoneValue function but it is undefined there also.
Edit: Created a fiddle: https://jsfiddle.net/n35u7ncz/
<form name="phone_form" id="crm_phonegrid" ng-app="crm_phonegrid" ng-controller="phoneCtrl">
<table cellpadding="2">
<tr>
<td><input type="text" name="new_phone" placeholder="Number" ng-model="addNumber.phoneNumber" onfocus="onFocusUpdateMask()" ui-mask="{{mask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="addNumber.phoneType" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="button" ng-click="addNumber()" value="Add" /></td>
<td>{{phone_form.new_phone.$viewValue}}</td>
<td>{{addNumber.phoneNumber}}</td>
</tr>
</table>
<table cellpadding="2">
<thead>
<tr>
<th>Phone Link</th><th>Phone Number</th><th>Phone Type</th><th>Primary Flag</th><th>Mask</th><th>View</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="number in numbers">
<td><a style="color:#1160B7;text-underline-position:below" href="" ng-click="openPhoneRecord(number)">{{ number.crm_phonenumber }}</a></td>
<td><input type="text" id="crm_phonegrid_number" name="phone_number_input" model-view-value="true" ng-model="number.crm_phonenumber" ng-change="setPhoneValue(number)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" /></td>
<td><select name="phoneTypeSelect" ng-model="number.crm_phonetypecode" ng-change="setValue(number)" ng-options="option.name for option in phoneTypeOptions track by option.Value"></select></td>
<td><input type="radio" name="primary" id="primaryRadio" ng-checked="number.crm_isprimary" ng-model="number.crm_isprimary" ng-change="setValue(number)" ng-value="number.crm_isprimary" ng-click="setFlag(number)" /></td>
<td>{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}</td>
<td>View: {{phone_form.phone_number_input.$viewValue}}</td>
</tr>
</tbody>
</table>
</form>
We got this working. The trick was to use the $index to generate a unique Id for the element and then pass that to the controller.
I've updated the fiddle here: https://jsfiddle.net/n35u7ncz/3/
The general idea is that the input field needs to be tagged and have an ng-change:
<input type="text" id="phone_input_id" name="phone_input_name_{{$index}}" ng-model="number.crm_phonenumber" ng-change="setValue(number, $index)" ui-mask="{{number.crm_crm_country_crm_phonenumber.crm_PhoneMask}}" ui-mask-placeholder ui-mask-placeholder-char="_" />
And then:
$scope.setValue = function(item, index)
{
item.crm_phonenumbermasked = $scope.phone_form["phone_input_name_" + index].$viewValue;
}
I want to set default value of e.name to "ALL" using ng-init
Here is my TEMPLATE code :
<tr ng-repeat="e in employees" ng-init="employees[0] = 'ALL'">
<td>{{ $index + 2}}</td>
<td>{{ e.name}}</td>
<button type="button" ng-click="select(employee)">
Select
</button>
</td>
</tr>
DIRECTIVE link
scope.employees = EmployeeService.query();
Here I want to set default value of e.name to ALL before generating dynamic data
I am getting dynamic data properly in employees and {{ e.name}} from directive
but here I want to show ALL in same <td> before getting dynamic data
If you're just trying to display ALL before data is retrieved, you could consider using an or operator.
<tr ng-repeat="e in employees">
<td>{{$index + 2}}</td>
<td>{{e.name || 'ALL'}}</td>
<button type="button" ng-click="select(employee)">
Select
</button>
</td>
</tr>
However, if you actually need ALL to be a value, I would strongly suggest setting it to the default value where ever you model employees.