0

我有这段 HTML 代码

<html>
<head></head>
<body>
<div ng-init="controller.onInit()" style="divContainer">
    <div class="divLoading" style="vertical-align:middle" ng-show="controller.noOfLoadingInProgress > 0">
      <span class="text">  Loading ...</span> <img src="../../Styles/Images/loading.gif" />
    </div>
    <br />
    <h1>
        Test</h1>
    <div ui-view="wizardContent">
    </div>
    <!--<div class="clear">
    </div>-->
    <div>
        <a class="buttonprev" id="btnPrevious" href="#" ng-show="controller.wizard.wizardIndex > 1"
            ng-click="controller.wizard.previous()"><span>Previous </span></a>
            <a class="buttonCancel"
                id="btnCancel" href="#" ng-click="controller.wizard.cancel()"><span>Cancel </span>
            </a>
            <a class="buttonnext" id="btnNext" ng-disabled="controller.wizard.isNextInProgress"
                href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted  && (controller.wizard.wizardIndex < controller.wizard.wizardItems.length-1)"
                ng-click="controller.wizard.next()"><span>Next</span> </a>
            <a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
                    ng-click="controller.wizard.finish()" ng-disabled ="controller.wizard.isFinished == 1"><span>Finish</span> </a>
    </div>
</div>
</body>
</html>

还有这段 javascript 代码。

var WizardItem = function (manager, uiState) {
    this.manager = manager;
    this.uiState = uiState;
}

var Wizard = function ($state, onFinishCallback, wizardItems) {
    var self = this;

    self.onFinishCallback = onFinishCallback;
    self.wizardItems = wizardItems;
    self.wizardIndex = 0;
    self.isNextInProgress = false;
    self.isFinished = 0;

    self.refresh = function () {
        $state.go(wizardItems[self.wizardIndex].uiState);
    };
    self.next = function () {
        if ((self.wizardIndex < wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            if (wizardItems[self.wizardIndex].manager.overrideNext == null) {
                self.wizardIndex++;
                $state.go(wizardItems[self.wizardIndex].uiState);
            }
            else {
                self.isNextInProgress = true;
                wizardItems[self.wizardIndex].manager.overrideNext(onFinishCallBack);
            }
        }

        function onFinishCallBack(success) {
            self.isNextInProgress = false;
            if (success) {
                self.wizardIndex++;
                $state.go(wizardItems[self.wizardIndex].uiState);
                self.isFinished = 1;
            }
        }
    }

    self.refreshWizardFrom = function (newWizardItems) {
        self.wizardItems.splice(0);
        for (var c = 0; c < newWizardItems.length; c++) {
            self.wizardItems.push(newWizardItems[c]);
        }
    }

    self.previous = function () {
        if (self.wizardIndex > 1) {
            self.wizardIndex--;
            console.log($state.go(wizardItems[self.wizardIndex].uiState));
            $state.go(wizardItems[self.wizardIndex].uiState);
        }
    };
    self.cancel = function () {
        if (confirm('Are you sure you want to cancel!')) {
            $state.go('Home');
        }
    };
    self.finish = function () {
        self.isFinished = 1;
        if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            //Ajmal Bug 410 - Variable flag isFinished set to 1 and being called on finish button click to disable it
            self.isFinished = 1;
            self.onFinishCallback();
            self.isFinished = 1;
            // alert('finish');
        }
    };

    self.validateCurrentWizardItem = function () {
        return wizardItems[self.wizardIndex].manager.validate();
    };

    self.initAllWizardItems = function () {
        for (var c = 0; c < wizardItems.length; c++) {
            wizardItems[c].manager.onInit();
        }
    }

    self.registerValidations = function () {
        for (var c = 0; c < wizardItems.length; c++) {
            wizardItems[c].manager.registerValidations();
        }
    };

};

我想在单击一次后禁用完成按钮。我已经尝试过类似的方法，但它仍然无法在 javascript 文件中使用，请使用标志

self.isFinished = 0;

然后在完成函数中将其设置为 1

self.isFinished = 1

然后在代码的 html 部分使用 ng-disabled

ng-disabled = "controller.wizard.isFinished == 1"

有人能弄清楚问题出在哪里吗？

谢谢

4

5 回答 5

0

ng-disabled不能用于a标签。你可以用这个

HTML

<a ng-click="disabled()" class="btn" ng-class="{'disabled':disable}">Click Me</a>

JS

app.controller('MainCtrl', function($scope) {
  var count=0;
  $scope.disable=false;
  $scope.disabled = function() {
  if(count>0) { return false;}else{
    alert("do someting else");
    $scope.disable=true;
    count++;
  }
}
});

CSS

.disabled { cursor: default; opacity: .5; }

您可以在第一次单击后使用此代码来防止单击事件。

如需参考，请单击此链接

希望它对你有用。

于 2016-12-21T07:22:49.130 回答
0

实际上，禁用标签没有任何意义，因此我决定使用此功能从所有标签中删除所有链接。

在 self.finish 函数中，添加了对函数的调用（粗体）

 self.finish = function () {
        if ((self.wizardIndex == wizardItems.length - 1) && wizardItems[self.wizardIndex].manager.validate()) {
            self.onFinishCallback();

            ConvertAnchorToSpan();
            // alert('finish');
        }
    };

在向导之外，在同一个 javascript 文件中使用了该函数。

function ConvertAnchorToSpan() {
    var $link = $('a');
    var $span = $('<span>');
    $link.after($span.html($link.html())).remove();
}

它现在可以工作并防止多次提交。我删除了 javascript 文件中的所有 isFinished 标志以及 html 中的 ng-disabled。

于 2016-12-21T06:25:04.937 回答
0

尝试做self.wizadr.isFinished = 1;而不是self.isFinished = 1;

于 2016-12-15T13:50:00.500 回答
0

您不能禁用标签。在按钮上使用 ng-disabled。还在正文上添加 ng-app 指令

于 2016-12-15T14:01:31.053 回答
0

由于锚标记没有禁用属性，因此您可以为此使用自定义代码。我用它ng-class代替ng-disabled它将向您的锚标记添加一个类，并在 css 中编写代码以禁用此类元素。

<style>
  .disabledOn {
    cursor: not-allowed;
    pointer-events: none;
    color: grey;
   }
</style>

HTML

 <a class="buttonnext" id="btnFinish" href="#" ng-show="controller.termsAndCondition.isTermAndConditionAccepted && (controller.wizard.wizardIndex == controller.wizard.wizardItems.length-1)"
                ng-click="controller.wizard.finish()" ng-class="{disabledOn : controller.wizard.isFinished == 1}"><span>Finish</span> </a>

祝你好运:)

于 2016-12-21T06:43:24.547 回答