gpt4 book ai didi

javascript - 在 Angular Materials 上隐藏时显示为文本

转载 作者:行者123 更新时间:2023-11-30 00:06:10 24 4
gpt4 key购买 nike

我在玩 Angular Materials,想根据复选框隐藏东西。它有效...除了我隐藏的第一个输入框在应该隐藏时显示为文本。

似乎没有其他人有这个问题,所以我认为这是我是一个 Angular 菜鸟问题之一,所以请帮助我:)

这是 Plunkr

和代码:

<html lang="en" >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script language="javascript">
angular
.module('app', ['ngMaterial'])

</script>
</head>
<body ng-app="app">
<div id="tabContainer" ng-cloak>
<md-content class="md-padding">
<md-tabs class="md-accent" md-dynamic-height >
<md-tab id="tab1">
<md-tab-label>1</md-tab-label>
<md-tab-body>
<label for="hello">
<br/>
<md-checkbox id="1" ng-model="checked">
Checkbox #1
</md-checkbox>
</label>
<br/>
<md-input-container>
<label for="2">Input #1</label>
<input ng-show="checked">
</md-input-container>
<br/>
<md-input-container>
<label for="3">Drop Down</label>
<md-select ng-model="selectedUser" ng-show="checked">
<md-option>What's up?</md-option>
<md-option>Yo?</md-option>
<md-option>Why is "Brother" Input there when we hide?</md-option>
<md-option>Idk!? He's suppose to be hidden!</md-option>
</md-select>
</md-input-container>
</md-tab-body>
</md-tab>
<md-tab id="tab2" >
<md-tab-label>2</md-tab-label>
<md-tab-body>Item #2 <br/>selectedIndex = 1;</md-tab-body>
</md-tab>
<md-tab id="tab3">
<md-tab-label>3</md-tab-label>
<md-tab-body>Item #3<br/>selected Index = 2;</md-tab-body>
</md-tab>
</md-tabs>
</md-content>
</div>
</body>
</html>

最佳答案

您可以将 ng-hideng-show 放置在 md-input-container 元素上以达到您想要的效果.

http://plnkr.co/edit/1ieqQtCEBrZzoY9SWh16?p=preview

<md-input-container ng-hide="checked">
<label for="2">Input #1</label>
<input >
</md-input-container>
<br/>
<md-input-container ng-show="checked">
<label for="3">Drop Down</label>
<md-select ng-model="selectedUser">
<md-option>What's up?</md-option>
<md-option>Yo?</md-option>
<md-option>Why is "Brother" Input there when we hide?</md-option>
<md-option>Idk!? He's suppose to be hidden!</md-option>
</md-select>
</md-input-container>

关于javascript - <ng-show> 在 Angular Materials 上隐藏时显示为文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38471484/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com