2017-03-17 2 views
0

Ich möchte, dass meine Schaltfläche nur angezeigt wird, wenn eine der Optionen im Auswahlbereich ausgewählt ist.Schaltfläche nur anzeigen, wenn die Option ausgewählt ist

Ich versuchte mit ng-Show und ng-ausblenden, aber es hat nicht so funktioniert, wie ich wollte.

+0

versuchen Sie es mit der 'ng-show' Direktive auf die Schaltfläche. Es ist sehr einfach und effektiv. –

+0

'ng-show' mit Bedingung' selectedOptions.length> 0' –

Antwort

2

Verwendung ng-if Richtlinie mit mehreren Bedingungen

<div class="col-md-6" ng-if="current_Hotel && current_Hotel != ''"> 
    <h1>{{current_Hotel.hotel_name}}</h1> 
    <p>{{current_Hotel.hotel_description}}</p> 
    <img class="img img-responsive" ng-src="{{current_Hotel.image_url}}"> 
    <btn class="btn btn-primary">Book a room </btn> 
</div> 
+0

Das funktioniert auch. Vielen Dank – DragonBorn

+0

kein Problem stellen Sie sicher, als Antwort zu markieren: D –

1

ngmodel Folgenden wird ein Auswahl eingestellt werden, wenn Option ausgewählt ist, müssen Sie prüfen, ob Modell ausgewählt ist oder nicht

<div class="row" ng-controller='ctrl1'> 
     <div class ="form_group"> 
      <select class="form-control" ng-options='item as item.hotel_name for item in hotels.data' ng-model='current_Hotel' ng-click="selectHotel()"><option value="" selected disabled>Choose a hotel</option> 
      </select> 
     </div> 

     <div class="col-md-6">  
      <h1>{{current_Hotel.hotel_name}}</h1> 
      <p>{{current_Hotel.hotel_description}}</p> 
      <img class="img img-responsive" ng-src="{{current_Hotel.image_url}}"> 
      <btn ng-show="current_Hotel" class="btn btn-primary">Book a room </btn> 
     </div> 
</div> 
2

ng-show oder ng-hide sollte funktionieren basierend auf dem Wert der ng-model, die Sie zugewiesen haben, wenn eine Option ausgewählt wird, vorausgesetzt, Sie arbeiten im selben Bereich.

Haben Sie versucht ng-show="current_Hotel !== ''"?

+1

Arbeitete, wenn ich ng-show = "current_Hotel.hotel_name! == ''". Danke – DragonBorn

+1

@SLASH bist du willkommen! Als Ergänzung zur Antwort von sachila ranawaka (aktuell ausgewählt): Ich habe ng-if nicht erwähnt, weil es den Code aus html löscht und bei jedem Digest-Zyklus eine Evaluierung durchführt, um zu überprüfen, ob der Code erneut eingefügt werden muss, was zu Leistungsproblemen führen kann Wenn es überstrapaziert wird, sei vorsichtig! – Diego

+0

Ich behalte das im Hinterkopf. Vielen Dank – DragonBorn

Verwandte Themen