angularjs – 根据选择隐藏/显示列

发布时间：2020-12-17 16:58:03 所属栏目：安全来源：网络整理

导读：我使用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'

我使用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

解决方法

您可以使用ng-change =“[second =”,first =”]”来清除输入字段,否则如果您希望在更改时使用更多功能,请使用ng-的函数调用更改= “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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!