如何正确使用ng-class或angular.element？

Question

我正在接收动态数据（以json格式），并且需要更改按钮的背景图像。每个按钮都有ID，因此很容易知道，哪个按钮会被操作。

但是当我尝试动态地操纵按钮的背景图像时，我遇到了问题。

示例按钮：

<button id="1111_1111_c">Value1</button>
<button id="2222_2222_d">Value1</button>

我试图像这样进行操作:(使用JQuery）

var btnId = '2222_2222_d';
$('#' + btnId).css('background-image','url(images/btn_red.gif)');

但它什么都没发生。如果我尝试与纯JQuery相同，它可以工作。

我知道有更新角度dom-updater或事件来更新dom。但不知道该怎么做。

是否有指令或使用ng-class的解决方案？

谢谢！

Answer 1

在Angular中，我们想要考虑更改模型/ $ scope属性，然后自动更新HTML视图。 （我们不希望/需要使用ID。）因此，在要更改的按钮上声明一个模型属性：

<button ng-class="button_1111_class" id=...>Value1</button>

（上面，button_1111_class是$ scope上的一个属性。）然后，当你获得数据时，修改控制器中的button_1111_class模型数据，例如：

$scope.button_1111_class = 'red_bg_image';  // red_bg_image is a CSS class you define

，您的视图应自动更新。

如果您在AngularJS之外获取数据，则可能需要在$ scope中包装模型/ $ scope更改。$ apply（）：The view is not updated in AngularJS