angularjs + how to apply css class to message text, based on http post response

Question

I would like to be able to add a CSS class to the text color of a message based on the response.

Currently I do it this method:

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;
}

and it works, but now I have two classes that can be added to the success and error messages. I need to figure out how to add them so that I can remove the style attribute that changes the text to red or green.

The classes names are:

•   Success: “text-green”

•   Error: “text-red”

What is the method to correctly achieve this?

Any help would be great.

Thank you, Erasmo

You can use ngClass to provide the element with classes on the go. This should resolve your issue: https://angular.io/api/common/NgClass — Vibhor Dube, Jul 15 '20 at 14:57
How would using ngClass look within the existent code? Thank you — erasmo carlos, Jul 15 '20 at 14:58
Does this answer your question? [AngularJS ngClass conditional](https://stackoverflow.com/questions/16529825/angularjs-ngclass-conditional) — Vijay Palaskar, Jul 15 '20 at 18:10

Vijay Palaskar · Accepted Answer · 2020-07-15T17:17:30.190

1

You can use ng-class for this
in js file

      $scope.responseCode = response.data.status;

then in html

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

Refer this more about ng-class: https://docs.angularjs.org/api/ng/directive/ngClass

or Using classList.add:

For success message you can use

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

For Error message you can use

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

edited Jul 15 '20 at 17:17

answered Jul 15 '20 at 14:57

Vijay Palaskar

526
5
15

I am not sure how to implement ngClass – erasmo carlos Jul 15 '20 at 15:01

angularjs + how to apply css class to message text, based on http post response

1 Answers1