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. May 1, 2017 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 May 1, 2017 at 3:57
  • There are two ways either take help of new array variable or add a new property in the rows object; May 1, 2017 at 5:46

1 Answer 1


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. May 1, 2017 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. May 1, 2017 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. May 2, 2017 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. May 2, 2017 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 May 11, 2017 at 1:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .