2014-10-10 3 views
0

У меня есть 2 кнопки на моей странице «Сохранить набор» & «Загрузите комплект». Кнопка «Сохранить набор» имеет нг отключенной = isSaveDisabled()Отключить кнопку в угловом js

..... 
.controller('saveLoadSetToolbarBtn', ['$scope','$modal','propertiesModified', 
    function ($scope,$modal,propertiesModified) { 
        $scope.loadTuneSet = function() { 

      $modal.open({ 
       templateUrl: 'loadSetDlg.html', 
       controller: 'loadSetCtrl' 
      }); 
     }; 

     $scope.isSaveDisabled = function() { 
      return !propertiesModified.get(); 
     }; 

....... 

Когда я нажимаю Load Set, он откроется всплывающее окно, и их я буду иметь кнопку OK. На этой кнопке, я должен отключить кнопку «Сохранить установки»

кнопку OK,

.controller('loadSetCtrl', ['$scope', '$modalInstance', 'generalDataService', 
    function ($scope, $modalInstance, generalDataService) { 


     $scope.items = []; 
     $scope.selectedSet = undefined; 

     $scope.ok = function() {     
      //doing some logic 
      closeDialog(); 
      $modalInstance.close(); 
     }; 

Если какое-либо изменение значений произойдет в моей странице, то эта кнопка «Сохранить Set» будет включена. проблема в том, что если я изменю любое значение на моей странице, эта кнопка активирует (как и ожидалось). Если я нажму кнопку «Загрузить набор», откроется всплывающее окно и нажмите кнопку «ОК» (доступно в Popup), тогда этот «Сохранить набор» должен вернуться в состояние «Отключить». Я должен иметь возможность возвращать логическое значение true через эту функцию isSaveDisabled при нажатии кнопки OK.

+0

Каков ваш вопрос? – nwinkler

+0

Как отключить кнопку «SaveSet» при нажатии кнопки «ОК»? – Dosti

+0

Можете ли вы, пожалуйста, обновить свой вопрос, чтобы это отразить? Что делает ваш текущий код, и что не работает? Что такое 'propertiesModified'? Где он обновляется? – nwinkler

ответ

0

Простой:

<button ng-model="btnSaveSet" ng-disabled="btnSaveSet_disabled" 
ng-click="btnSaveSet_disabled=true">SaveSet</button> 
+0

Что означает btnSaveSet_disabled? – Dosti

+0

переменная области, дайте ей любое имя –

+0

У меня уже есть функция isSaveDisabled() в контроллере «saveLoadSetToolbarBtn». Теперь мне нужно назначить/переопределить логическое значение этой функции, возвращаясь с другого контроллера «loadSetCtrl» – Dosti

0

Я думаю, что вы пытаетесь закодировать модальный View, как демка этой страницы: http://angular-ui.github.io/bootstrap/.


Я рекомендую попробовать эту демоверсию и изменить ее в соответствии с вашими потребностями, потому что нечего менять. Я стараюсь, чтобы дать вам несколько советов в комментариях к коду:
Это JavaScript код:
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) { 
 

 
    $scope.items = ['tuneSet', 'tuneSet2','tuneSet3']; 
 

 
    $scope.open = function (size) { 
 

 
    var modalInstance = $modal.open({ 
 
     templateUrl: 'loadSetDlg.html',  // name it like the Template for the Modal 
 
     controller: 'loadSetCtrl', // name it like the used controller for the Modal 
 
     size: size,      // not necessary for you 
 
     resolve: { 
 
     items: function() {   // this will pass in your items into the ModalCtrl 
 
      return $scope.items; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function (selectedItem) {  // here is the callback, when the 
 
     $scope.selected = selectedItem;      // Modal get closed 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date());   
 
    }); 
 
    }; 
 
    
 
    // Here you can implement your logic depending on the user-input that is available on $scope.selected 
 
    // it is an object. 
 
    
 
    console.log($scope.selected); // here you can see it in the console. 
 
           
 
    
 
}); 
 

 
// Please note that $modalInstance represents a modal window (instance) dependency. 
 
// It is not the same as the $modal service used above. 
 

 
angular.module('ui.bootstrap.demo').controller('loadSetCtrl', function ($scope, $modalInstance, items) { 
 

 
    $scope.items = items; 
 
    $scope.selected = { 
 
    item: $scope.items[0]    // this will catch the user input (click on link) 
 
    }; 
 

 
    $scope.ok = function() { 
 
    $modalInstance.close($scope.selected.item); // this will pass the chosen tuneSet back to 
 
    };           // ModalDemoCtrl 
 

 
    $scope.cancel = function() { 
 
    $modalInstance.dismiss('cancel'); 
 
    }; 
 
}); 
 

 
And this is the HTML you need:
<div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="loadSetDlg.html"> 
 
     <div class="modal-header"> 
 
      <h3 class="modal-title">TuneSet selection!</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <ul> 
 
       <li ng-repeat="item in items"> 
 
        <a ng-click="selected.item = item">{{ item }}</a> 
 
       </li> 
 
      </ul> 
 
      Selected: <b>{{ selected.item }}</b> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button class="btn btn-primary" ng-click="ok()">OK</button> 
 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </script> 
 

 
    <button class="btn btn-default" ng-click="open()">Open me!</button> 
 
    <button class="btn btn-default" ng-click="open('lg')">Large modal</button> 
 
    <button class="btn btn-default" ng-click="open('sm')">Small modal</button> 
 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
 
</div>


+0

Спасибо !!! но это всплывающие функции прекрасно уже ... нужно отключить кнопку на кнопке ОК. – Dosti

+1

, то вы можете использовать ng-disabled = "disable_SaveBtn" как атрибут, как в ответе Самира. «Disable_SaveBtn» должен быть переменной $ scope - Variable, которую вы можете установить true/false в вашем контроллере. Установите его false в обратном вызове модального представления. – alxU

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