I recently encountered a unique issue while experimenting with Angular Materials for my project. I tried to hide certain elements based on a checkbox selection, and although it worked for most items, the first input box that I attempted to hide ended up displaying as text instead of being hidden.
From what I can tell, this problem seems to be specific to my lack of experience with Angular. As someone who is new to using Angular, I would greatly appreciate any guidance or solutions you may have to offer :)
If you'd like to take a closer look, you can access the Plunkr demo here.
Here is the code snippet:
<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>