disable other fields when selecting a option from select dropdown

Question

i'm working on a form and it has a select dropdown.in that dropdown it's showing several options. i want to disable some fields if a certain option is selected from the dropdown.

for example in my transaction type, if i select "Within Company" option i want to disable all the below fields ('Select Bank','Branch Name', 'Fund Transfer Remarks' ).

How to do this? i tried something but did not work.I'll post it here

Form

    <ion-content  class="has-header" scroll="true" padding="true">
        <form id="myForm">

                    <label><h4><b>Beneficiary Name</b></h4></label>
                    <input type="text"  id="beneName" name="beneName" ng-model="data.beneName"  class="item-input-wrapper" >
                    <br> 

                    <label><h4><b>Source Account Number</b></h4></label>
                    <select id="originAcc"   style="margin: auto; width:100%; " ng-model="data.origin" ng-options="account.account for account in accountsArr">
                    <option value="" selected="selected">--Select Account--</option>
                    </select><br><br>

                    <label><h4><b>Transfer Amount</b></h4></label>
                    <input type="number"  id="amount" name="amount" ng-model="data.amount" class="item-input-wrapper"   decimal-places onkeypress='return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 46'>
                     <br>  

                    <label><h4><b>Beneficiary Account Number</b></h4></label>
                    <input type="text"  id="beneAcc" name="beneAcc" ng-model="data.beneAcc"  class="item-input-wrapper"  >
                    <br>


                    <label><h4><b>Transaction Type</b></h4></label>
                    <select id="transtype"   style="margin: auto; width:100%; " ng-model="data.transtype" ng-options="type.type for type in types" ng-change="hideFields()">
                    <option value="" selected="selected">--Select Transaction Type--</option>
                    </select>
                    <br><br>



                    <label><h4><b>Select Bank</b></h4></label>
                    <select id="beneBank"   style="margin: auto; width:100%; " ng-model="data.beneBank" ng-options="bank.bank for bank in banks" ng-disabled="disableFields">
                    <option value="" selected="selected">--Select Bank--</option>
                    </select>
                    <br><br>



                    <label><h4><b>Branch Name</b></h4></label>
                    <select id="bname"   style="margin: auto; width:100%; " ng-model="data.bname" ng-options="bname.bname for bname in bname" ng-disabled="disableFields">
                    <option value="" selected="selected">--Select Branch Name--</option>
                    </select>
                    <br><br>   

                    <label><h4><b>Fund Transfer Remarks</b></h4></label>
                    <input type="text"  id="narration" name="narration" ng-model="data.narration" class="item-input-wrapper">


                    <ion-checkbox ng-model="isChecked">Save as beneficiary</ion-checkbox>

                    <div class="col" style="text-align: center">
                    <button align="left" class="button button-block button-reset" style="display: inline-block;width:100px;text-align:center " ng-click="reset()" padding-top="true">Reset</button>

                    <button class="button button-block button-positive"  style="display: inline-block;width:100px;margin-left:auto; margin-right:auto; " ng-click="thirdPartySubmit(data)" padding-top="true" >Transfer</button>
                    </div>

         </form>
    </ion-content>
</ion-view>

myController

.controller('thirdpartyTransferCtrl', ['$scope','$rootScope', 'checkEmptyObjects', 'refreshTextFields', '$http', '$ionicPopup', 'ApplicationSettings', function($scope, $rootScope, checkEmptyObjects, refreshTextFields, $http,  $ionicPopup, ApplicationSettings) {

                                        $scope.hideFields = function() {
                                                if($scope.transtype == "Within Company") {
                                                $scope.disableFields = true;
                                                }
                                                else{
                                                $scope.disableFields = false;
                                                }
                                                };

                                        $scope.types = [
                                                { type: 'Within Company' },
                                                { type: 'SLIPS Transction'  },
                                                { type: 'CEFT Transction'  },

                                                 ];

                                        $scope.banks = [
                                                { bank: 'Sampath Bank' },
                                                { bank: 'Seylan Bank'  },
                                                { bank: 'BOC'  },

                                                 ];

                                        $scope.bname = [
                                                { bname: 'Colombo 05' },
                                                { bname: 'Colombo 06'  },
                                                { bname: 'Colombo 07'  },
                                                { bname: 'Wanathamulla'  },

                                                 ];

                                        }])

Answer 1

Make sure you add ng-disabled="disableFields" to all of the fields (its missing on Fund Transfer Remarks) then change

if($scope.transtype == "Within Company") {

to

if($scope.data.transtype.type == "Within Company") {