2

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>
Max
  • 470
  • 2
  • 9
  • 22

2 Answers2

0

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'">
nanndoj
  • 6,580
  • 7
  • 30
  • 42
0

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.

Michael Coleman
  • 3,288
  • 3
  • 19
  • 18
  • Great, I would be keen to see how that would work, I just haven't been able to get expressions to work. – Michael Coleman Feb 15 '15 at 21:02
  • Hi, thanks I got this working. However vm.scrubber.serviceSmallId returns value of the selected option which is a GUI. Hence I modified the js to: if (chk == 'DCC69AB8-A41C-49AF-95DB-864AB9380C0F'). instead of if (chk === 'weekly') . I was wondering if there is a way by which I could check the description of selected item instead of value (GUI in this case) ? – Max Feb 15 '15 at 22:10
  • Got it at http://stackoverflow.com/questions/27426539/angular-js-get-selected-text-as-ng-model-without-ng-options – Max Feb 15 '15 at 22:41
  • @Max You shouldn't do JQuery when you're using Angular, and certainly not manipulate the DOM at the controller. Use the above solution if you can't do it otherwise, it's better. – Omri Aharon Feb 16 '15 at 07:23