带有ng-click的样式应用程序

Question

我有一个在ng-repeat中绘制的块列表。 我使用BootStrap网格来设置每个块的宽度。 我想在点击时展开一个块。默认情况下，使用col-lg-2绘制块。想法是在点击事件（ng-click）之后使用col-lg-12。

有人会知道如何使用ng-class或ng-style指令将这个样式单独应用于每个块？

谢谢。

Answer 1

使用ng-click和ng-class内置指令的组合非常简单：

<my-block ng-class="{'col-lg-12': item.clicked, 'col-lg-2': !item.clicked}" 
  ng-click="clickMe(item)"></my-block>

然后在您的控制器中，您将创建一个范围函数：

$scope.clickMe = function(item) {
  item.clicked = !item.clicked;
};

Answer 2

我假设你有一个对象数组。然后，您可以在对象中添加其他属性，在数组中将其命名为className。默认设置为col-lg-2。在ng-click功能中，您可以将属性值更改为col-lg-12，这将单独影响。您需要将此属性与ng-class一起使用才能更改类。