Нажатая кнопка должна оставаться зависшей, а другие кнопки должны быть отключены

Question

Мои кнопки создаются динамически в контроллере моего приложения, поэтому при нажатии одной кнопки эта кнопка должна оставаться в цвете с наведением или любой другой цвет, а другие кнопки должны быть отключены, я пробовал это, затем все кнопки отключаются .

Вот мой код, где создаются кнопки:

for(var i = 0 ; i<data.actions.length; i++) {
                        x= x + "<a ng-disabled='isDisabled' ng-model = 'buttons' class = 'btn btn-outline btn-primary btn-xs btn-rounded pull-right' value ="+$scope.forButtons[i].value+" ng-click = 'submitForButton("+ i +")'>"+$scope.forButtons[i].text+"</a>"
                    }

При вызове функции submitForButton я сделал следующее:

$scope.isDisabled = true;

Итак, что я должен сделайте так, чтобы нажатая кнопка была окрашена в цвет (или любой другой), а другие кнопки были отключены.

Answer 1

Все кнопки становятся отключенными, потому что у вас есть одна переменная области действия $scope.isDisabled

Похоже, у вас есть массив текста кнопки в $scope.forButtons, так что вы можете сохранить логическое значение isDisabled в этом массиве ?

В вашем для l oop вы можете установить отключенное значение:

x= x + "<a ng-disabled='" + $scope.forButtons[i].isDisabled + "' ng-model = ....

Затем в вашем методе submitForButton

$scope.submitForButton = function(btnNo) {

  //Disable all buttons other than the submitted 
  for (var c = 0; c < $scope.forButtons.length; ++c) {
     if(c !== btnNo){
        $scope.forButtons[c].isDisabled = true;
    }   
  }

   //further logic...
}

Вам также следует взглянуть на ng-repeat, так как было бы лучше создавать кнопки в представлении, а не динамически в контроллере.