が表示され、非表示の値angularjs

以下のコードで

を使用する方法、私は、値の表示と非表示と選択オプションがあります：が表示され、非表示の値angularjs

私はそれが値を表示する必要があります表示する]をクリックした場合
私は非表示をクリックすると、それが必要値を非表示にします。

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Dropdown</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    </head> 
    <body ng-app=""> 
     Show HTML: 
     <select ng-model="myVar"> 
      <option value="1">Display</option> 
      <option value="2">Hide</option> 
     </select> 
     <div ng-class="col-xs-4" ng-show="myVar"> 
      <form class="form-horizontal"> 
       <div class="form-group"> 
        <label for="inputFirstName" class="control-label col-xs-2">FirstName</label> 
        <div class="col-xs-10"> 
         <input type="text" class="form-control" id="inputFirstName" placeholder="First Name"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputLastName" class="control-label col-xs-2">LastName</label> 
        <div class="col-xs-10"> 
         <input type="text" class="form-control" id="inputLastName" placeholder="Last Name"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputEmail" class="control-label col-xs-2">Email</label> 
        <div class="col-xs-10"> 
         <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <label for="inputPassword" class="control-label col-xs-2">Password</label> 
        <div class="col-xs-10"> 
         <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
        </div> 
       </div> 
       <div class="form-group"> 
        <div class="col-xs-offset-2 col-xs-10"> 
         <button type="submit" class="btn btn-primary">Sign Up</button> 
        </div> 
       </div> 
      </form> 
     </div> 
      </form> 
     </div> 
    </body> 
    </html>

出典

2017-03-07 manideep

あなたは実際のフィドルを提供できますか？また、あなたの質問を正しくフォーマットしてください – Neil

-1

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <body ng-app=""> 
 
     Show HTML: 
 
     <select ng-model="myVar"> 
 
      <option value="1">Display</option> 
 
      <option value="2">Hide</option> 
 
     </select> 
 
     <div ng-class="col-xs-4" ng-show="myVar==1"> 
 
      <form class="form-horizontal"> 
 
       <div class="form-group"> 
 
        <label for="inputFirstName" class="control-label col-xs-2">FirstName</label> 
 
        <div class="col-xs-10"> 
 
         <input type="text" class="form-control" id="inputFirstName" placeholder="First Name"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputLastName" class="control-label col-xs-2">LastName</label> 
 
        <div class="col-xs-10"> 
 
         <input type="text" class="form-control" id="inputLastName" placeholder="Last Name"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputEmail" class="control-label col-xs-2">Email</label> 
 
        <div class="col-xs-10"> 
 
         <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="inputPassword" class="control-label col-xs-2">Password</label> 
 
        <div class="col-xs-10"> 
 
         <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
 
        </div> 
 
       </div> 
 
       <div class="form-group"> 
 
        <div class="col-xs-offset-2 col-xs-10"> 
 
         <button type="submit" class="btn btn-primary">Sign Up</button> 
 
        </div> 
 
       </div> 
 
      </form> 
 
     </div> 
 
     
 
     
 
    </body>

出典

2017-03-07 10:29:28

あなたは/非表示

出典

2017-03-07 10:30:28

-1

を表示したい要素に、このディレクティブを置く ng-class="{'your_class_name':(your_condition) , 'other_class_name' : ('other_condition')}"

ng-class="{'hidden' : (myVar == '2')}

を試してみてください

このようにしてみてください

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dropdown</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
</head> 
<body ng-app=""> 
    Show HTML: 
    <select ng-model="myVar"> 
     <option value="1">Display</option> 
     <option value="2">Hide</option> 
    </select> 
    <div ng-class="col-xs-4" ng-show="myVar == '1'"> 
     <form class="form-horizontal"> 
      <div class="form-group"> 
       <label for="inputFirstName" class="control-label col-xs-2">FirstName</label> 
       <div class="col-xs-10"> 
        <input type="text" class="form-control" id="inputFirstName" placeholder="First Name"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputLastName" class="control-label col-xs-2">LastName</label> 
       <div class="col-xs-10"> 
        <input type="text" class="form-control" id="inputLastName" placeholder="Last Name"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputEmail" class="control-label col-xs-2">Email</label> 
       <div class="col-xs-10"> 
        <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <label for="inputPassword" class="control-label col-xs-2">Password</label> 
       <div class="col-xs-10"> 
        <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
       </div> 
      </div> 
      <div class="form-group"> 
       <div class="col-xs-offset-2 col-xs-10"> 
        <button type="submit" class="btn btn-primary">Sign Up</button> 
       </div> 
      </div> 
     </form> 
    </div> 
     </form> 
    </div> 
</body> 
</html>

出典

2017-03-07 10:31:02

が表示され、非表示の値angularjs

答えて

関連する問題