CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

Hide / Show Column depending on select

I use ng-hide and a selectbox to hide/show 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 it: Fiddle

Question

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

Upvotes: 4

Views: 10392

Answers (1)

Nidhish Krishnan
Nidhish Krishnan

Reputation: 20751

You can use ng-change="[second='', first='']" to clear out the input fields, otherwise if you want more functionality to be done at the time of on-change use a function call at ng-change="someFunction()"

simply if you want to clear the input field which you have shown 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>

Upvotes: 1

Related Questions