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>

我试图像下面这样在init（）中设置不透明度，

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

并出现以下错误，这意味着我认为在尝试设置不透明度时未创建按钮。因此，我无法在init（）中实现此目标：

TypeError：无法设置未定义的属性“不透明度”

Answer 1

不要那样做直接的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

Answer 2

您尝试过ng样式吗？

示例

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

您可以使用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

如何设置元素的不透明度？

4 个答案: