I am running into an issue while determining the type of input box. I have a table in angular and when I change the type of input box it changes the type of all the input boxes in that column. I want only to change the type of the input box in the selected row. below is my code

<tr ng-repeat="r in rows">
                            <td><select ng-model="r.selectedFieldRowData"
                                ng-change="fieldSelectChange(r)" ng-if="r.selectedObjectRowData"
                                ng-options="option for option in fields"
                                class="slds-select box hideOutlineClass" required="required">
                                    <option value=""></option>
<td><input type="{{dataTypeValue}}"
                                ng-if="r.selectedFieldRowData" ng-model="r.selectedValueRowData"
                                name="rowValueData" placeholder="enter Value"
                                class="hideOutlineClass" required="required" /></td>


$scope.dataTypeValue = 'text';
$scope.fieldSelectChange = function(r){
$scope.dataTypeValue = 'number';//it changes for all rows and not the one selected
  • Can you please share the structure of rows variable? If you are using a single variable then it's not possible, you can add the dataTypeValue in the rows variable and bind with the input element. – itzmukeshy7 May 1 '17 at 3:55
  • my rows variable has nothing related to type of input . Depending on my field row select drop down I have to assign type to my input. Can you please provide a example or a fiddle for the same. I cannot find a proper answer for dynamically changing the type based on field for one row only – user5129806 May 1 '17 at 3:57
  • There are two ways either take help of new array variable or add a new property in the rows object; – itzmukeshy7 May 1 '17 at 5:46

Your page is getting all the rows changed to the same type because you are assigning the type to the app's scope instead of the row scope.

Think of your row as an object. That object needs an attribute to indicate the field type, and it is the one you'll want to modify (the row scope, not the app's).

On your input you would have something like:

<!-- r being your row object, so you'll modify its attribute instead of the context's -->
<input type="{{r.dataTypeValue}}">
  • Thanks for the help . It worked. But when my type changes to date type it removes the pre existing value. – user5129806 May 1 '17 at 14:32
  • Well, this won't work with ng-model apparently. You can always copy the different input types and use ng-if to show the appropriate input tag. – Renato Oliveira May 1 '17 at 15:01
  • Correct but it still appends class ng-invalid and ng-invalid-date if I change type from date to text and this prevents my form validation. – user5129806 May 2 '17 at 10:07
  • What is your current approach? If you are trying to dynamically set the attribute on the tag, then Angular's directives will probably mess with your validation (like you are saying). If you could create multiple input tags, and only one to be rendered on the page using ng-if together with your dataTypeValue attribute, then I think you shouldn't have this issue since the other inputs aren't even being rendered on the page. – Renato Oliveira May 2 '17 at 15:41
  • Currently I am changing the data type attribute dynamically. I cannot have multiple input rendering using ng-if. The issue I am running into is if on form load I have a date type input and I change it to text it does not validates the form as it expects it to a date format value – user5129806 May 11 '17 at 1:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.