ng-style not working in angularjs ionicapp-CodePudding

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 > 
        <div >
            <div >
                <div >
                    **<a ng-style="{'color':'{{ data.demographics.showRed }}' }"**  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!

CodePudding user response：

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

Try:

                <a ng-style="{'color': data.demographics.showRed}"  ng-click="goPMIAlerts($event)"></a>