ng-style not working in angularjs ionicapp

January 24, 2023

I’m having an issue with what looks like ng-style but I suspect it may be a scoping issue also.

The HTML code;

<ion-view view-title="Demographics" name="demographics-view" can-swipe-back="false">
    <ion-content class="has-header"> 
        <div class="list card">
            <div class="item item-divider">
                <div class="button-bar">
                    **<a ng-style="{'color':'{{ data.demographics.showRed }}' }"** class="button button-small button-icon icon ion-alert-circled" ng-click="goPMIAlerts($event)"></a>
.....

The js code:

                $scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {

                    $('ion-nav-bar .title').each(function () {
                        $(this).text("Demographics");
                    });
...
                    tblDemographics.demographicsUID(sysGlobals.pmi_id)
                        .then(function (res) {
                            if (res) {
                                $scope.data.demographics = res;
                            }

                            return tblSettings.getType("LANG");
                        })
                        .then(function (res) {
                            if (res) {
                                $scope.data.demographics.langcodes = res;
                            }

                            tblPMIAlerts.pmiID(sysGlobals.pmi_id)
                            .then(function (res) {
                                if (res) {
            
                                    $scope.data.demographics.pmialerts = res;
        
                              
 **                                   if($scope.data.demographics.pmialerts.length > 0) {
                                        $scope.data.demographics.showRed = 'red';
                                    } else {
                                        $scope.data.demographics.showRed = 'grey';
                                    }**
                                }
        
                            }); 
                        })

What I’m trying to achieve is to have the icon color of red if there is data and grey if not.

I’ve looked around here on SO and Googled of course but I’ve as yet not been able to solve the issue!

>Solution :

I think the braces and quotes are not required, as you already using a Angular directive.

Try:

                <a ng-style="{'color': data.demographics.showRed}" class="button button-small button-icon icon ion-alert-circled" ng-click="goPMIAlerts($event)"></a>