Question

我正在尝试禁用和启用按钮：例如：如果我单击修改按钮我要禁用它并启用保存按钮，如果我单击保存按钮我想启用修改按钮并禁用保存按钮。谢谢。

在Angularjs代码下面：

angular.module('virtoCommerce.catalogModule')
.controller('virtoCommerce.catalogModule.categoriesItemsListController', ['$scope', function ($scope) {

        var isFieldEnabled = true;
        blade.updatePermission = 'catalog:update';        

    ... (more codes but not included)

        var formScope;
        $scope.setForm = function (form) { formScope = form; }

        //Save the prices entered by the user.
        function savePrice()
        {
            //TODO: Save the price information.
        }

    function isDirty() {
            return blade.hasUpdatePermission();
     };    

        //function enablePriceField
        function enablePriceField() {
            var inputList = document.getElementsByTagName("input");
            var inputList2 = Array.prototype.slice.call(inputList);

            if (isFieldEnabled == true) {                  
                for (i = 0; i < inputList.length; i++) {
                    var row = inputList2[i];

                    if (row.id == "priceField") {
                        row.disabled = false;
                    }
                }
            } else {                   
                for (i = 0; i < inputList.length; i++) {

                    var row = inputList2[i];

                    if (row.id == "priceField") {
                        row.disabled = true;
                    }                
                }
            }

            //Set the flag to true or false    
            if (isFieldEnabled == true) {
                isFieldEnabled = false
            } else {
                isFieldEnabled = true;
            }
        }


     var formScope;
     $scope.setForm = function (form) { formScope = form; }

     function canSave() {
            return isDirty() && formScope && formScope.$valid;
     }           


     //Angular toolbar commands
        blade.toolbarCommands = [
            {
                 name: "platform.commands.modify",
                 icon: 'fa fa-pencil',
                 executeMethod: function () { enablePriceField();},
                 canExecuteMethod: function () { return true; }
             },
             {
                 name: "platform.commands.save",
                 icon: 'fa fa-floppy-o',
                 executeMethod: function () { savePrice(); },
                 canExecuteMethod: canSave,
                 permission: blade.updatePermission
             }];
 }]);

Answer 1

我不确定我的代码是如何与问题相关的，但您可以使用ngDisabled指令以编程方式启用/禁用按钮（请参阅docs）。

在你的控制器中，初始化$ scope.enableSave = true（如你所愿，为false）。然后在你的HTML：

<button class="btn btn-primary" ng-disabled="!enableSave" ng-click="enableSave=!enableSave">Save</button>
<button class="btn btn-primary" ng-disabled="enableSave" ng-click="enableSave=!enableSave">Modify</button>

每次单击活动（即未禁用）按钮时，您将切换'enableSave'，此按钮将禁用您刚刚单击的按钮，并启用另一个按钮。

Answer 2

抱歉，我没有看到......我对virtoCommerce不熟悉，但如果我理解正确，你想要更新“canExecuteMethod＆＃39; ？也许尝试类似的东西：

$scope.enableSave = false;
function canSave() {
    return isDirty() && formScope && formScope.$valid && $scope.enableSave;
}

然后是按钮：

{
    name: "platform.commands.modify",
    icon: 'fa fa-pencil',
    executeMethod: function () { 
        enablePriceField();
        $scope.enableSave = true;
    },
    canExecuteMethod: function () { return !canSave(); }
},
{
    name: "platform.commands.save",
    icon: 'fa fa-floppy-o',
    executeMethod: function () { 
        savePrice(); 
        $scope.enableSave = false;
    },
    canExecuteMethod: function () { return canSave(); },
    permission: blade.updatePermission
}

作为旁注，如果isFieldEnabled是一个布尔值，你可以替换：

if (isFieldEnabled == true) {
    isFieldEnabled = false
} else {
    isFieldEnabled = true;
}

通过：isFieldEnabled = !isFieldEnabled;

Angularjs工具栏命令 - 禁用和禁用按钮

2 个答案: