javascript - 如何正确使用 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 的解决方案？

谢谢你！

score 1 · Accepted Answer

在 Angular 中，我们想考虑更改 model/$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() 中：视图在 AngularJS 中未更新

1 回答 1