<ng-show> erscheint als Text auf Angular Materials

Ich spielte mit Angular Materials herum und wollte die Dinge anhand eines Kontrollkästchens ausblenden. Es funktioniert ... außer dem ersten Eingabefeld, das ich ausgeblendet habe, erscheint es als Text, wenn es ausgeblendet werden soll.<ng-show> erscheint als Text auf Angular Materials

Es ist nicht jemand scheint anderes hat dieses Problem so gehe ich davon aus, es ist einer jener Ich bin ein Winkel Rookie Problem so mir bitte :)

Hier helfen die ist Plunkr

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

Quelle

2016-07-20 Sir Sheep

Sie konnten die ng-hide und ng-show am md-input-container Element stellen Sie den Effekt zu erzielen, die Sie wollen ed.

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>

Quelle

2016-07-20 02:56:09

Cool! Es funktioniert, danke! –

Cheers =), froh, dass Hilfe. –

<ng-show> erscheint als Text auf Angular Materials

Antwort

Verwandte Themen