Hide / show the column depending on the choice

Question

I use ng-hide and selectbox to hide / show the columns of my table.

HTML

<div ng-controller="MyCtrl">
<table>
    <tbody>
    <tr>
        <td ng-hide="myOption=='one'"><input ng-hide="myOption=='one'"></input></td>
     <td ng-hide="myOption=='one' || myOption=='two' "><input ng-hide="myOption=='one' || myOption=='two' "></input></td>
    </tr>
    </tbody> 
</table>
<select ng-model="myOption">
    <option value="one">test1</option>
    <option value="two">test2</option>
    <option value="three">test3</option>
</select>    
</div>    

It works well.

Here is a fiddle to demonstrate this: Fiddle

Question

How can I clear hidden input values ​​to avoid errors in my calculation? In jQuery, I know a solution, but I want to learn AngularJS

Answer 1

You can use ng-change="[second='', first='']"to clear the input fields, otherwise, if you want more functions to be executed during on-change, use the function callng-change="someFunction()"

just if you want to clear the input field you specified in jsfiddle you can try this

Working code

<div ng-controller="MyCtrl">
<table>
    <tbody>
    <tr>
        <td ng-hide="myOption=='one'"><input ng-model="first" ng-hide="myOption=='one'"></input></td>
     <td ng-hide="myOption=='one' || myOption=='two' "><input ng-model="second" ng-hide="myOption=='one' || myOption=='two' "></input></td>
    </tr>
    </tbody> 
</table>
<select ng-model="myOption" ng-change="[second='', first='']">
    <option value="one">test1</option>
    <option value="two">test2</option>
    <option value="three">test3</option>
</select>    
</div>