Angular js change type of input box

Question

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>
                            </select></td>
<td><input type="{{dataTypeValue}}"
                                ng-if="r.selectedFieldRowData" ng-model="r.selectedValueRowData"
                                name="rowValueData" placeholder="enter Value"
                                class="hideOutlineClass" required="required" /></td>

                            <td></tr>

$scope.dataTypeValue = 'text';
$scope.fieldSelectChange = function(r){
$scope.dataTypeValue = 'number';//it changes for all rows and not the one selected
}

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}}">
    ...
</input>