Javascript <；ng展会>；在角度材质上隐藏时显示为文本_Javascript_Angularjs

Javascript <；ng展会>；在角度材质上隐藏时显示为文本

javascript angularjs

Javascript <；ng展会>；在角度材质上隐藏时显示为文本,javascript,angularjs,Javascript,Angularjs,我在玩棱角材料，想根据复选框隐藏东西。它可以工作…除了我隐藏的第一个输入框在应该隐藏时显示为文本似乎没有其他人有这个问题，所以我假设这是其中一个问题，我是一个棱角分明的新手，所以请帮助我：）这是你的电话号码以及守则： <html lang="en" > <head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/

我在玩棱角材料，想根据复选框隐藏东西。它可以工作…除了我隐藏的第一个输入框在应该隐藏时显示为文本

似乎没有其他人有这个问题，所以我假设这是其中一个问题，我是一个棱角分明的新手，所以请帮助我：）

这是你的电话号码

以及守则：

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


有棱角的
.module（'app'，['ngMaterial']））
1.


复选框#1


输入#1


下降
怎么了？
哟？
为什么我们藏起来的时候“兄弟”会出现？
Idk！？他应该被藏起来！
2.
项目#2
选择的索引=1；
3.
项目#3
所选索引=2；

您可以将

ng hide

和

ng show

放置在

md input container

元素处，以达到您想要的效果


输入#1


下降
怎么了？
哟？
为什么我们藏起来的时候“兄弟”会出现？
Idk！？他应该被藏起来！

Cheers=），很高兴能帮上忙。

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