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工具欄命令 - 禁用和禁用按鈕

回答

相關問題