Question

我的页面中有2个按钮“Save Set”＆amp; “加载设置”。 “存储集”按钮具有ng-disabled = 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按钮。点击此按钮，我应该禁用“保存设置”按钮

确定按钮，

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


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

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

如果我的页面中发生任何值更改，则将启用此“存储集”按钮。问题是，如果我更改了我的页面中的任何值，则此按钮正在启用（正如预期的那样）。如果我单击“加载设置”按钮，弹出窗口将打开，然后单击确定按钮（弹出窗口上可用），然后此“保存设置”应该返回到禁用状态。我应该可以通过这个isSaveDisabled函数在OK按钮点击返回布尔值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>

禁用角度js中的按钮

2 个答案: