Max Max - 2 months ago 53
AngularJS Question

Angular JS ng-show/ hide based on drop-down list selected value

in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.

There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.

I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.



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




Answer

There probably is a more elegant "angular way" solution,

but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output

Explanation of changes

  • Provided ng-show a value vm.checker
  • added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker

Update

there is a more "angular way" - using expressions!
As per @Omri Aharon fiddle/comment below.

Comments