How can i access the dynamic value generated of "name" property in model. Following is the code:
<tbody ng-repeat="que in backgroundInfo.questions">
<tr>
<td>{{que.id}} {{que.text}}</td>
<td>
<input type="radio" name="{{que.id}}" value="Yes" ng-model="backgroundInfo.questions.answer"/>Yes
<input type="radio" name="queid" value="No" ng-model="backgroundInfo.questions.answer"/>No
<textarea name="comment{{que.id}}" ng-model="backgroundInfo.questions.comment[que.id]" rows="2"
cols="45"/>
</td>
</tr>
</tbody>
You are so close
name="{{comment[que.id]}}"
Is this already solved? Because I think if want to have a name like name="comment[1]", the code should be like:
<textarea name="comment[{{que.id}}]" ...
you can remove the ng-model cause I think, it will now work.
Furthermore, you can access the value of your textarea using
angular.element(<name>)
in your controller.
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 have the an Angular code as below. When I input a character in the text box, it is supposed to apply ng-class "error" in the div(parent) tag. This does not work.
Any idea what the issue is?
Code:
<ng-form name="innerForm">
<table>
<tbody>
<tr ng-repeat="value in values>
<td>
<div class="control-group input-append no-margin" ng-class="{error: innerForm.val_{{$index}}.$invalid}">
<input name="val_{{$index}}" id="val_{{$index}}" ng-model="value.val" ng-class="{edited: innerForm.val_{{$index}}}.$dirty"
type="text" ng-pattern="/^\d*\.?\d{0,2}$/" ng-required />
</div>
</td>
</tr>
</tbody>
</table>
</ng-form>
Here is an example. When I enter a alphabet, it is supposed to through a background color around the text box. But it does not happen. http://embed.plnkr.co/cchyQYE69lnkjEqUNGGv/
The problem is that you're mixing Angular template {{}} with an already-expressionable syntax. Correct the usage of ng-class like this:
ng-class="{error: innerForm['val_' + $index].$invalid}"
and
ng-class="{edited: innerForm['val_' + $index].$dirty}"
ng-class expect expression, it doesn't process {{}}(interpolation) directive, if in case you pass {{expression}}, then you will see an error. You have to correct your ng-class expression to below.
ng-class="{error: innerForm['val_'+ $index].$invalid}"
ng-class="{edited: innerForm['val_'+ $index].$dirty"
I have a condition where I need to display values depending on an if condition. Below is my template code.
Template:
<td>
<label>Review Title/Purpose*</label>
</td></br>
<div ng-if="title1 == true">
<td>
<input type="text" class="col-md-10" maxlength="256" ng-show="title1" ng-model="arform.revtitle"><required/>
</td></div>
<div ng-if="title1 != true">
<td><input type="text" class="col-md-10" maxlength="256" ng-show="!title1" ng-init="'{{reviewtit}}'" ng-model="arform.revtitle"><required/>
</td></div>
The value in ng-init="'{{reviewtit}}'" is the value I get from Views. Where as the value in ng-show="title1" is the value I get from controller.
I just wanted to know is it right to use ng-show in the different ways I mentioned?
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'm using angular with ng-repeat like that:
<tr ng-repeat="(fieldName, fieldValue) in publication">
<td>
<input type="text" ng-value="publication[fieldName]">
</td>
</tr>
But binding doesn't work - so after change I have still old values in publication[fieldName]. How can I achieve binding?
It should be ng-model instead of ng-value if you want a data binding.