隐藏/显示列取决于选择

时间:2014-05-20 14:21:36

标签: angularjs

我使用 ng-hide 和一个选择框来隐藏/显示我的表格列。

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>    

效果很好。

这是一个演示它的小提琴:Fiddle

问题

如何清除隐藏输入的值以避免计算错误?在jQuery我知道解决方案,但我想学习AngularJS

1 个答案:

答案 0 :(得分:1)

您可以使用ng-change="[second='', first='']"清除输入字段,否则如果您希望在更改时更多功能,请使用ng-change="someFunction()"处的函数调用

如果你想清除你在jsfiddle中显示的输入字段,你可以试试这个

<强> 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>