Как установить непрозрачность элемента?

Question

Я создал несколько элементов кнопки, используя ng-repeat.Теперь мне нужно установить непрозрачность этих элементов кнопки на основе логического значения в JavaScript без ng-click, потому что непрозрачность должна быть установлена ​​перед любыми событиями щелчка.

HTML

<div id="splash_btn_box_ng">
    <button id="{{button.buttonId}}" ng-click="setMode(button)" ng-repeat="button in buttons"></button>
</div>

Iпопытался установить непрозрачность в init () следующим образом,

$scope.buttons.buttonId.style.opacity = 0.3;

, и в результате возникла следующая ошибка, которая означает, что я думаю, что кнопка не была создана в то время, когда я пытаюсь установить прозрачность.Поэтому я не смог добиться этого в init ():

TypeError: Невозможно установить свойство 'opacity' из неопределенного

Answer 1

Вы можете использовать директиву ng-class для условного применения класса css:

Кнопка переключения непрозрачности предназначена для изменения состояния.

HTML:

<button id="{{button.buttonId}}" ng-class="{'low-opacity': isLow}" 
    ng-repeat="button in buttons">{{button.buttonId}}</button>
<hr>

<button ng-click="toggleOpacity()">Toggle opcaity</button>

CSS-файл:

.low-opacity {
  opacity: 0.3;
}

Контроллер:

  $scope.isLow = true;

  $scope.buttons = [
    {
        buttonId: 1
    },
    {
        buttonId: 2
    }
  ];

  $scope.toggleOpacity = function () {
    $scope.isLow = !$scope.isLow;
  }

Образец jsfiddle

Для получения дополнительной информации:

https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

Вы пробовали стиль нг?

Пример

HTML

<button id="{{button.buttonId}}" ng-click="setMode(button)"
        ng-repeat="button in buttons" ng-style="myObj">
  Welcome
</button>

Контроллер

$scope.myObj = {
        "opacity" : "0.3"
    }

Angularjs ngStyle

Answer 3

Использование ng-style:

<button id="{{button.buttonId}}" ng-style="button" ng-repeat="button in buttons"></button>

Контроллер:

$scope.button = {
    "opacity": "0.3"
}

Answer 4

Не делайте прямых манипуляций с DOM, используйте директивы ng-style или ng-class.Шаблон:

<button id="{{button.buttonId}}" ng-style="myStyle" ng-repeat="button in buttons"></button>

Контроллер:

$scope.myStyle = {'opacity': '.3'};

https://docs.angularjs.org/api/ng/directive/ngStyle

https://docs.angularjs.org/api/ng/directive/ngClass