Angular JS: Sichtbarkeit sichtbar beim Klicken auf das Optionsfeld

Ich habe zwei Radiobuttons, zwei Textfelder und eine Schaltfläche.Angular JS: Sichtbarkeit sichtbar beim Klicken auf das Optionsfeld

Wenn ich auf die erste Schaltfläche klicke, sollte nur ein Textfeld angezeigt werden. Wenn ich auf die zweite Schaltfläche klicke, sollten zwei Textfelder erscheinen.

aber ich möchte es mit machen Sichtbarkeit: versteckte | sichtbare Eigenschaft, wie ich Button Position unter zwei Textfelder festgelegt werden soll.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<div class="form-group"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <div class="basic_info_radio_toggle"> 
 
      <label class="one"> 
 
       <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'"> 
 
       <span>One</span></label> 
 
      <label class="two"> 
 
       <input type="radio" name="registration_options" ng-click="option='two'"> 
 
       <span>Two</span></label> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group" ng-show="option ==='two'"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <form role="form"> 
 
      <div class="form-group set_margin_0 set_padding_0"> 
 
       <label>Button</label> 
 
       <input class="form-control" placeholder="Enter Button Name" type="text"> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div> 
 
<div class="form-group" ng-show="option ==='two' || option === 'one'"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <span>Link</span> 
 
     <input class="form-control" placeholder="http://" type="text"> 
 
    </div> 
 
</div> 
 

 

 
<div class="form-group"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> 
 
     <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> 
 

 
    </div> 
 
</div>

Danke.

Quelle

2016-12-20 Anonymous

könnten Sie eine Plunker erstellen, http://plnkr.co/edit – dreamweiver

Versuchen ng-style Richtlinie:

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body> 
 
    <script> 
 
     var app = angular.module("TestApp", []); 
 
     app.controller("myCtrl", function() {    
 
     }); 
 
    </script> 
 
    <div ng-app="TestApp" ng-controller="myCtrl"> 
 
     <div class="form-group"> 
 
      <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> 
 
      <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
       <div class="basic_info_radio_toggle"> 
 
        <label class="one"> 
 
         <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'"> 
 
         <span>One</span></label> 
 
        <label class="two"> 
 
         <input type="radio" name="registration_options" ng-click="option='two'"> 
 
         <span>Two</span></label> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
      <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
       <form role="form"> 
 
        <div class="form-group set_margin_0 set_padding_0"> 
 
         <label>Button</label> 
 
         <input class="form-control" placeholder="Enter Button Name" type="text"> 
 
        </div> 
 
       </form> 
 
      </div> 
 
     </div> 
 
     <div class="form-group" ng-style="{visibility: option == 'two' ? 'visible' : 'hidden'}"> 
 
      <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
      <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
       <span>Link</span> 
 
       <input class="form-control" placeholder="http://" type="text"> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> 
 
       <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-12-20 06:55:29

yeah .. das ist, was ich wollte. Danke.. –

Bitte versuchen Sie es mit einer Funktion und nicht mit der Inline-Definition. Auch werde ich lieber ng-if anstatt ng-show verwenden, weil ng-if das Rendern der HTML-Vorlage blockieren wird, wenn die Bedingung falsch ist. Bitte versuchen Sie das folgende Code-Snippet.

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<body> 
 

 
<script> 
 
    var app = angular.module("TestApp", []); 
 
    app.controller("myCtrl", function ($scope) { 
 
     $scope.setVisibility = function(val){ 
 
      var resultVal = (val == 'one')? 'one' : 'other'; 
 
      $scope.option = resultVal; 
 
     } 
 
    }); 
 
</script> 
 

 
<div ng-app="TestApp" ng-controller="myCtrl"> 
 
    <div class="form-group"> 
 
     <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> 
 
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
      <div class="basic_info_radio_toggle"> 
 
       <label class="one"> 
 
        <input type="radio" name="registration_options" checked="checked" ng-click="setVisibility('one')" ng-init="option='one'"> 
 
        <span>One</span></label> 
 
       <label class="two"> 
 
        <input type="radio" name="registration_options" ng-click="setVisibility('two')"> 
 
        <span>Two</span></label> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="form-group" ng-if="option ==='other'"> 
 
     <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
      <form role="form"> 
 
       <div class="form-group set_margin_0 set_padding_0"> 
 
        <label>Button</label> 
 
        <input class="form-control" placeholder="Enter Button Name" type="text"> 
 
       </div> 
 
      </form> 
 
     </div> 
 
    </div> 
 
    <div class="form-group" ng-if="option ==='other' || option === 'one'"> 
 
     <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
     <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
      <span>Link</span> 
 
      <input class="form-control" placeholder="http://" type="text"> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="form-group"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> 
 
      <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 

 
</body> 
 

 
</html>

Quelle

2016-12-20 06:42:50 Nitheesh

wenn ich am 2. Optionsfeld klicken, werden zwei Textfelder sollten erscheint anstatt zu verschwinden Textfeld –

@Rishi Ich habe das Skript aktualisiert. – Nitheesh

danke für deine antwort. aber ich möchte nicht, dass die Position der Sicherungsschaltfläche geändert wird. Wenn Sie auf den zweiten Radio-Button klicken, wird die Taste gedrückt. stattdessen sollte es da sein und 2. Textfeld sollte sichtbar sein. Es wird also ein Leerzeichen zwischen der Textbox und der Schaltfläche "Speichern" angezeigt. –

Ich sehe Sie nicht haben Ihre Winkel App initialisiert.

Versuchen Sie dieses:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<script> 
 
angular.module("MyApp", []); //angular app 
 
</script> 
 

 
<div ng-app="MyApp"> 
 

 
<div class="form-group"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <div class="basic_info_radio_toggle"> 
 
      <label class="one"> 
 
       <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'"> 
 
       <span>One</span></label> 
 
      <label class="two"> 
 
       <input type="radio" name="registration_options" ng-click="option='two'"> 
 
       <span>Two</span></label> 
 

 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <form role="form"> 
 
      <div class="form-group set_margin_0 set_padding_0"> 
 
       <label>Button</label> 
 
       <input class="form-control" placeholder="Enter Button Name" type="text"> 
 
      </div> 
 
     </form> 
 
    </div> 
 
</div> 
 
<div class="form-group" ng-class="{'invisible':option =='one'}"> 
 
    <label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
 
    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
 
     <span>Link</span> 
 
     <input class="form-control" placeholder="http://" type="text"> 
 
    </div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> 
 
     <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> 
 

 
    </div> 
 
</div> 
 
</div>

Quelle

2016-12-20 06:52:53

@Rishi, sehe meine aktualisierte Antwort –

Sie können diese w versuchen ith ng-Klasse

CSS

<style> 
.visibleOff{visibility: hidden;} 
</style>

HTML

<div class="form-group"> 
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label">Registration</label> 
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
    <div class="basic_info_radio_toggle"> 
     <label class="one"> 
      <input type="radio" name="registration_options" checked="checked" ng-click="option='one'" ng-init="option='one'"> 
      <span>One</span></label> 
     <label class="two"> 
      <input type="radio" name="registration_options" ng-click="option='two'"> 
      <span>Two</span></label> 

    </div> 
    </div> 
</div> 

<div class="form-group" > 
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
    <form role="form"> 
     <div class="form-group set_margin_0 set_padding_0"> 
      <label>Button</label> 
      <input class="form-control" placeholder="Enter Button Name" type="text"> 
     </div> 
     </form> 
    </div> 
</div> 
<div class="form-group" ng-class="{'visibleOff': option == 'one'}"> 
<label class="col-lg-2 col-md-2 col-sm-2 col-xs-12 control-label"></label> 
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12"> 
    <span>Link</span> 
    <input class="form-control" placeholder="http://" type="text"> 
</div> 
</div> 


<div class="form-group"> 
    <div class="col-md-12 col-sm-12 col-xs-12 pull-right set_padding_0"> 
    <button class="btn m-b-xs w-xs btn-danger common_btn set_margin_0">Save</button> 

    </div> 
</div>

Quelle

2016-12-20 07:03:55

Angular JS: Sichtbarkeit sichtbar beim Klicken auf das Optionsfeld

Antwort

Verwandte Themen