禁用角js中的按钮

Question

我在页面“Save Set”&“Load Set”中有2个按钮。 “保存设置”按钮NG-禁用= isSaveDisabled（）

..... 
.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(); 
     }; 

....... 

当我点击加载设置，它会打开一个弹出和他们我会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(); 
     }; 

。问题是如果我在页面中更改了此按钮的任何值（如预期的那样）。如果我点击“加载设置”按钮，弹出窗口会打开，点击确定按钮（在弹出窗口中可用），那么这个“存储设置”应该返回到禁用状态。我应该能够通过点击OK按钮上的isSaveDisabled函数返回布尔值true。

Answer 1

简单：

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

Answer 2

我想你想编写一个模式的看法，这样子页的演示：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>