CODEWITHSUNDEEP
javascriptangularjs
Henry C Wong
Henry C Wong

Reputation: 101

<ng-show> appears as text when hidden on Angular Materials

I was playing around with Angular Materials and wanted to hide things based on a checkbox. It works...except the first input box I hide shows up as text when it should be hidden.

It doesn't appear anyone else has this problem so I assume it's one of those I'm an angular rookie problem so please help me out :)

Here is the Plunkr

and the code:

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

Upvotes: 2

Views: 305

Answers (1)

Kenny Chan
Kenny Chan

Reputation: 1232

You could place the ng-hide and ng-show at the md-input-container element to achieve the effect that you wanted.

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>

Upvotes: 1

Related Questions