Angular JS-ng-ein - / ausblenden basierend auf drop-down-Liste ausgewählten Wert
in dem folgenden code habe ich ein drop-down-Liste (serviceSmallId) für die Art der Dienstleistung.
Es ist gefüllt mit Modell-info.
Gibt es ein zweites Feld check-box, die sollte nur sichtbar sein, wenn drop-down hat einen ausgewählten Wert von 'Wöchentlich'. Ich bin versucht, ng-anzeigen/ausblenden der Winkel.
Ich habe versucht, die Suche nach möglichen Lösungen, aber kein Glück.
Kann jemand bitte leiten Sie mir, was ich falsch mache.
HTML:
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es gibt sicherlich eine elegantere "Winkel-Art" - Lösung,
aber ich aktualisiert Sie code für die Arbeit hier - http://jsbin.com/tupisoriho/1/edit?html,js,output
Erklärung von Veränderungen
ng-show
einen Wertvm.checker
ng-change
auf das select-element und gab es eine FunktioncheckerGo
welche getestet, um zu sehen, wenn dropdown == 'wöchentlich', wenn ja ändernvm.checker
Update
dort ist eine "Winkel-Art" - mit Ausdrücken!
Als pro @Omri Aharon fiddle/Kommentar unten.
Brauchen Sie nicht zu erhalten die Wert-Eigenschaft, da eine ng-Modell nicht, halten Sie das element, sondern der Wert selbst;
muss
EDIT: In deinem Fall
vm.scrubber.serviceSmallId
enthält die ID und nicht die BeschreibungWeekly
. Ich schlage vor, Sie verwendenng-change
Richtlinie, um eine Funktion aufzurufen, die in Ihrem controller, den Artikel zu finden, basierend auf ID, und stellen Sie in der Steuerung sichtbar sein für ng-show.vm.selectObj()
finden und festlegen der aktuell ausgewählte Objekt im Rahmen einer controller-variable (BSP.:vm.selectedItem
) und:<option value="Weekly">...</option>
oder<option value="...">Weekly</option>