在视图中直接更改元素的样式

Question

我知道这不是真正的棱角分明的范例，但我真的需要做以下事情：

<div ng-click="this.style.opacity=0;">click/hide me</div>

但是，this无法识别，当我点击元素时，如何使用javascript内联指令更改不透明度（不使用ngClass！）

Answer 1

试试

<div ng-click="myStyle={'opacity':0}" ng-style="myStyle">click/hide me</div>

Answer 2

试

<div id="myId" ng-click="setOpacity()">click/hide me</div>

并在你的控制器内：

$scope.setOpacity = function(){
  document.getElementById("myId").style.opacity = 0; //pure JS
  $('#myId").fadeTo(0,0); //Jquery
}

未经测试，但这应该可以胜任。或者，您可以使用以下表达式：

$scope.setOpacity = function(){
  $('#myId").hide();
}

这也应该有用。

Answer 3

如果你只想隐藏元素而再也不想再看到它，那就用它吧。

<div ng-click="hide = true" ng-hide="hide">click/hide me</div>

不要忘记将hide设置为false以开始......

$scope.hide = false;

Answer 4

请执行以下操作

添加CSS

.hide {
    opacity: 0
}

HTML

<div ng-click="myStyle = 'hide'" ng-class="myStyle">click/hide me</div>