2016-06-28 29 views
0

ボタンを無効にして有効にしようとしています: たとえば:修正ボタンをクリックすると無効にして保存ボタンを有効にし、保存ボタンをクリックすると有効にします変更ボタンをクリックし、保存ボタンを無効にします。ありがとうございました。 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 
      }]; 
}]); 

答えて

0

私はあなたのコードは、質問に関連している方法を見てわからないですが、あなたは(docsを参照)プログラム的ngDisabledディレクティブを使用してボタンを無効/有効にすることができます。

コントローラでは、$ scope.enableSave = trueをintialize(必要に応じて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に」あなたは順番にあなただけのクリックボタンを無効にし、もう一方を可能にするアクティブ(。つまり、無効になっていない)ボタン、をクリックするたびに切り替わります。

+0

あなたの回答よりも...私は私の場合、HTMLを使用する代わりにAngularjsを使ってボタンを動的に作成します。 「virtoCommerce」に精通していれば、ボタンがブレード上に作成されます。 – eddy0223

0

申し訳ありませんが、私は見たことがありません...私はvirtoCommerceに精通していませんが、私が正しく理解したら 'canExecuteMethod'を更新したいですか? isFieldEnabled = !isFieldEnabled;

:によって

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

:isFieldEnabledは、置き換えることができるブール値であれば、サイドノートとして

{ 
    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 
} 

:ボタンに続いて

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

:たぶんそのような何かを試してみてください

関連する問題