Angular JS: anzeigen Textfeld relativ basierend auf, klicken Sie auf Optionsfeld und ändern Sie Hintergrundfarbe von div

Question

image

Ich bin neu in AngularJS. Wie in der Abbildung gezeigt, ist standardmäßig der Radio-Button linkedin ausgewählt.

aber wenn ich auf Facebook Radioknopf wähle, dann erscheinen zwei Textfelder für 1 Sekunde und verstecken das verbundene in Textbox.

wenn ich auf linkedin button dann verlinkt in textbox sollte angezeigt werden und andere textbox sollte verschwinden und wenn ich auf facebook radio button dann facebook textbox sollte angezeigt werden.

hier ist JSFiddle

danken Ihnen.

.social_icon_radio_toggle { 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 

 
label { 
 
    float: left; 
 
    width: 35px; 
 
    height: 35px; 
 
    overflow: hidden; 
 
    cursor: pointer !important; 
 
    margin-right: 5px; 
 
} 
 

 
span { 
 
    text-align: center; 
 
    font-size: 15px; 
 
    margin: auto; 
 
    display: block; 
 
} 
 

 
input { 
 
    position: absolute; 
 
} 
 

 
//wheather radio button is checked or not 
 
input:checked + span { 
 
    background-color: $linked_in_bg_color; 
 
    color: #fff; 
 
    min-height: 100%; 
 
    width: 35px; 
 
    line-height: 33px; 
 
} 
 

 
input:not(:checked + span) { 
 
    background-color: #edf1f2; 
 
    color: #58666e; 
 
} 
 

 
.linkedin { 
 
    background-color: #edf1f2; 
 
    color: #58666e; 
 
    border: thin #a8a8a8 solid; 
 
    color: #a8a8a8; 
 
    line-height: 33px; 
 
} 
 

 
.facebook { 
 
    background-color: #edf1f2; 
 
    color: #58666e; 
 
    border: thin #ced9db solid; 
 
    line-height: 35px; 
 
} 
 

 

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section"> 
 
    <div class="social_icon_radio_toggle"> 
 
     <label class="linkedin"> 
 
      <input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'"> 
 
      <span><i class="fa fa-linkedin"></i> </span></label> 
 
     <label class="facebook"> 
 
      <input type="radio" name="registration_options" ng-click="option='facebook'"> 
 
      <span><i class="fa fa-facebook"></i> </span></label> 
 
    </div> 
 

 
    <div> 
 
     <input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'" ng-hide="option == 'facebook'"> 
 
    </div> 
 
    <input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'" ng-hide="option == 'linkedin'"> 
 
</div> 
 

 
        

Answer 1

.social_icon_radio_toggle{ 
 
    float: left; margin-right: 20px; 
 
    } 
 

 
    label { 
 
     float:left;width:35px; height:35px;overflow:hidden;cursor: pointer !important; margin-right: 5px;} 
 
     span {text-align:center;font-size: 15px;margin:auto;display: block;} 
 
    
 

 
    input {position:absolute;} 
 

 
    //wheather radio button is checked or not 
 
    input:checked + span {background-color:$linked_in_bg_color;color:#fff; min-height: 100%; width: 35px; line-height: 33px;} 
 
    input:not(:checked + span) {background-color:#edf1f2;color:#58666e;} 
 
    .linkedin {background-color:#edf1f2;color: #58666e; border: thin #a8a8a8 solid; color: #a8a8a8;line-height: 33px;} 
 
    .facebook {background-color:#edf1f2;color: #58666e;border: thin #ced9db solid; line-height: 35px;} 
 

 

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 set_padding_0 social_icons_section"> 
 
          <div class="social_icon_radio_toggle"> 
 
           <label class="linkedin"> 
 
            <input type="radio" name="registration_options" checked="checked" ng-click="option='linkedin'" ng-init="option='linkedin'"> 
 
            <span><i class="fa fa-linkedin"></i> </span></label> 
 
           <label class="facebook" > 
 
            <input type="radio" name="registration_options" ng-click="option='facebook'"> 
 
            <span><i class="fa fa-facebook"></i> </span></label> 
 
          </div> 
 

 
          <div type="text" ng-show="option === 'linkedin'" > 
 
           <input class="form-control " placeholder="www.linkedin.com/example" > 
 
          </div> 
 
          <div ng-show="option === 'facebook'"> 
 
           <input class="form-control " placeholder="www.facebook.com/example" type="text" > 
 
          </div> 
 

 

 
         </div>

Hier wird aktualisiert JSFiddle

Hoffe das hilft.

Answer 2

Sie sollten die Richtlinie ng-Modell verwenden Sie den Wert Ihrer 'Option' Eigenschaft zu verfolgen. Stellen Sie dann für jeden Radiobutton den entsprechenden ng-Wert ein.

Und berücksichtigen Sie, dass ng-show und ng-hide auf ähnliche Weise funktioniert. Es ist nicht notwendig, beide gleichzeitig zu verwenden. ng-hide = verbergen das Element, wenn der Ausdruck = true ng-show = das Element zeigen, wenn der Ausdruck = true

<label class="linkedin" > 
<input type="radio" name="registration_options" ng-model="option" ng-value="'linkedin'"> 
<span><i class="fa fa-linkedin"></i> </span></label> 
<label class="facebook" > 
<input type="radio" name="registration_options" ng-value="'facebook'" ng-model="option"> 
<span><i class="fa fa-facebook"></i> </span></label> 

<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="option == 'linkedin'"> 
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="option == 'facebook'"> 

Beispiel Arbeiten: https://plnkr.co/edit/ezDAwU41vYKrw7DwWJAB