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

我试图禁用和启用按钮：例如：如果我点击修改按钮，我想禁用它并启用保存按钮，如果我点击保存按钮，我想启用修改按钮并禁用保存按钮。谢谢。Angularjs工具栏命令 - 禁用和禁用按钮

下面的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 
      }]; 
}]);

来源

2016-06-28 eddy0223

我不知道我看到你的代码是如何相关的问题，但你可以启用/禁用按钮编程使用ngDisabled指令（见docs）。

在你的控制器中，intialize $ scope.enableSave = true（假，如你所愿）。然后在您的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”你点击活动每次按键，这将反过来禁用您只需按下按钮，并启用另一种（即未禁用）。

来源

2016-06-28 20:52:08 paulwasit

比你的回应...但我的情况我们动态地创建与Angularjs的按钮，而不是使用HTML。如果你熟悉'virtoCommerce'，按钮是在刀片上创建的。 – eddy0223

对不起，我没有看到...我不熟悉virtoCommerce，但如果我理解正确，您想更新'canExecuteMethod'？也许尝试类似的东西：

$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;

来源

2016-06-29 13:57:10 paulwasit

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

回答

相关问题