使用ng-checked值更改样式

Question

我想用复选框的启用/禁用更改样式。

• 对于复选框 - ＆gt;可视性：可见
• For Unchecked Box - ＆gt;可见性：隐藏

我如何使用角度来做到这一点？我试过ng-checked但没有任何幸运。

ng-change="style={'visibility':'visible'}" ng-style="style"

这仅适用于启用复选框。在取消选中后不隐藏。请帮忙。

Answer 1

您还可以使用ng-class并启用一个在条件为true或false时隐藏元素的类。

HTML

<input type="checkbox" ng-model="visible"/> show / hide

<p ng-class="{'hideItem': !visible}"> this hides when you uncheck </p>

CSS

.hideItem {
  visibility: hidden;
}

see plunker

Answer 2

我认为你根本不需要使用ng-change。请改用ng-model

我会写一些类似的东西：

<input type="checkbox" ng-model="myModel"></input> 
<pre ng-style="{'display': (myModel) ? 'block' : 'none'}">Some text show/hide</pre> 

演示 Fiddle

---

  

这仅适用于启用复选框。在取消选中后无法隐藏。

原因应该是因为复选框ng-model结构。要让ng-change起作用，模型应该定义为Object（例如）：

$scope.theModel = {value:true}