1. 首頁
  2. 問答
  3. 如何顯示和使用angularjs

如何顯示和使用angularjs

2017-03-07 47 views
0

在下面的代碼隱藏價值，我有一個值顯示和隱藏選擇選項：如何顯示和使用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

+0

你能提供一個工作小提琴嗎？請正確格式化您的問題 – 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

1

嘗試ng-class="{'your_class_name':(your_condition) , 'other_class_name' : ('other_condition')}"

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

把這個指令要顯示/的元素隱藏

來源

2017-03-07 10:30:28

-1

請嘗試像這樣

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

相關問題

 相關問題