2014-09-25 6 views
0

Я работаю над формой, и у нее есть выделение dropdown. В этом выпадающем меню отображаются несколько параметров. Я хочу отключить некоторые поля, если в раскрывающемся списке выбран какой-либо параметр.отключить другие поля при выборе опции из выпадающего списка.

например, в моем типе транзакции, если я выбираю вариант «внутри компании», я хочу отключить все нижеследующие поля («Выбрать банк», «Название филиала», «Примечания к передаче средств»).

Как это сделать? я пытался что-то но 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

Убедитесь, что вы добавить нг отключенной = "disableFields" для всех полей (его хватает на фонд переноса Замечания) измените

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

в

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

Только что попробовал в plunker здесь ссылка http://plnkr.co/edit/b7iODzCUjfe9Mp5dCzMt – Luffy

+0

я попытался это, но все равно не будет работать :( – CraZyDroiD

+0

Если взять копию и пасту из вашего точного кода выше (исключая параметры контроллера) и добавьте его в пустой угловой проект, затем сделайте изменение, предложенное выше, оно работает для меня. Может быть, вы немного изменили код после публикации вопроса? Также проверьте свою консоль Javascript. – Mac

Смежные вопросы