AngularJS + 样式不适用于字段

Posted 2023-05-09

【中文标题】AngularJS + 样式不适用于字段

【英文标题】：AngularJS + style is not applied to field

【发布时间】：2020-11-13 16:08:03

【问题描述】：

我正在尝试为 api 响应上的消息应用颜色。

示例：

angularJS：

 .then(function (response) 
    angular.element(document.getElementById("msg")).css('color', '#00662f');
    $scope.Messages = response.data;
    

还有我的 html：

<div id="msg" ng-repeat="msg in Messages">msg</div>

但是这一行：

angular.element(document.getElementById("msg")).css('color', '#00662f');

似乎没有应用于消息的颜色。

你能告诉我我做错了什么吗？

感谢您的帮助。

伊拉斯莫

更新 - 我的解决方案

添加了一个布尔值

$scope.IsColor == true;

根据 API 响应将其设置为 false/true：

if (response.data.indexOf("sucessfully added") !== -1) 
    $scope.Messages = response.data;
    $scope.IsColor = true;
    angular.element("#msg").focus()
    return true;

else 
    $scope.Messages = response.data;
    $scope.IsColor = false;
    angular.element("#msg").focus()                           
    return false;

然后在 HTML 中

<div id="msg" ng-repeat="msg in Messages" ng-class="$scope.IsColor ? 'text-green' : 'text-red'">msg</div>

【问题讨论】：

你不应该使用 angular.element 来实现它。这真是一次糟糕的尝试。

【参考方案1】：

您应该通过ng-class 或ng-style 进行操作。请参阅 stackblitz 了解如何更新样式：

https://stackblitz.com/edit/angularjs-puf49l

除了样式之外，在您的 HTML 中：

<div id="msg" ng-repeat="msg in Messages">msg</div>

你应该用 class 替换 id，使用 id 来识别元素通常被认为有点糟糕，因为 id 是全局的，如果我碰巧它会立即搞砸发生碰撞。

【讨论】：

你好@huan feng，所以我需要做的就是改变 id 和 class？

你看过stackblitz的例子吗？实际上，您的代码中有几个问题。 1.你不应该使用 id 作为样式。 2. 避免使用angular.element之类的方式来改变元素的颜色。

【参考方案2】：

试试这个

angular.element(document.querySelector("msg")).css('color', '#00662f');

【讨论】：

让我试一试。谢谢！

它没有用。也许我应该使用一个布尔范围变量，然后在 html 中检查它的值？