2014-09-25 30 views
0

我正在处理表单,它有一个选择dropdown.in,该下拉菜单显示几个选项。如果从下拉列表中选择某个选项,我想禁用某些字段。从选择下拉菜单中选择一个选项时禁用其他字段

例如在我的交易类型中,如果我选择“公司内部”选项,我想禁用所有以下字段('选择银行','分行名称','资金转账备注')。

如何做到这一点?我试过的东西,但没有work.I'll张贴在这里

形式

<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' }, 

               ]; 

             }]) 

回答

1

请务必添加NG-禁用= “disableFields” 所有领域(其缺少资金转帐备注)然后改变

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

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

在这里plunker刚试过是链接http://plnkr.co/edit/b7iODzCUjfe9Mp5dCzMt – Luffy 2014-09-25 11:07:27

+0

我想,但如果我把你确切的代码复制和粘贴以上仍然无法工作:( – CraZyDroiD 2014-09-25 11:41:12

+0

(不包括控制器参数),并将其添加到一个空白的角度项目,然后进行上面提出的更改,它适用于我..也许你已经改变了自发布问题以来的代码稍微?另外,请检查您的Javascript控制台。 – Mac 2014-09-25 11:53:06

相关问题