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

Question

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.

Answer 1

You don't need to get the value property because a ng-model don't hold the element but the value itself;

 <div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">  

must be

 <div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">

EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.

  <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']"
            ng-change="vm.selectObj()">

vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:

  <div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">