时间戳

首页 > 解决方案 > angularjs +如何基于http post response将css类应用于消息文本

javascript - angularjs +如何基于http post response将css类应用于消息文本

问题描述

我希望能够根据响应将 CSS 类添加到消息的文本颜色中。

目前我这样做的方法是：

if (response.data.status == 201) {
    angular.element(document.getElementById("msg")).css("color", "green");
    $scope.msg = 'Users created for Meeting ' + r.id
        + ' on ' + $filter('date')(r.updated_at, 'M/d/yyyy')
        + ' at ' + $filter('date')(r.updated_at, 'HH:mm:ss');
    console.log("Status Code= " + response.data.status + ", Status Text= " + response.data.message);
    return true;
}
else {
    angular.element(document.getElementById("msg")).css("color", "red");
    $scope.msg = r.message;
    angular.element("#meeting-id").focus()
    console.log("Status Code= " + response.data.status + ", Status Text= " + response.data.message);
    
    return false;
}

它可以工作，但现在我有两个类可以添加到成功和错误消息中。我需要弄清楚如何添加它们，以便我可以删除将文本更改为红色或绿色的样式属性。

类名称是：

•   Success: “text-green”

•   Error: “text-red”

正确实现这一目标的方法是什么？

任何帮助都会很棒。

谢谢你，伊拉斯莫

标签： javascriptcssangularjs

解决方案


您可以在 js 文件中为此使用 ng-class

      $scope.responseCode = response.data.status;

然后在 html

    <div ng-class="{'text-success':responseCode == 201,'text-danger':responseCode != 201}">
        <h1>Welcome Home!</h1>
        <p>I like it!</p>
    </div>

有关 ng-class 的更多信息，请参阅：https ://docs.angularjs.org/api/ng/directive/ngClass

或使用 classList.add：

对于成功消息，您可以使用

     angular.element(document.getElementById("msg")).classList.add('green');

对于错误消息，您可以使用

angular.element(document.getElementById("msg")).classList.add('red');

推荐阅读