AngularJS ng-class and invalid tab - functionality is broken - html

Question

We have tabs working correctly using this HTML
<div class="col-lg-3 col-md-3 panel-container">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#general" ng-class="{true: 'invalid-tab', false: ''}[form.editTemplateGeneralForm.$invalid]">#Labels.general</a></li>
<li><a data-toggle="pill" href="#startingValues" ng-class="{true: 'invalid-tab', false: ''}[form.editTemplateStartingValuesForm.$invalid]">#Labels.startingValues</a></li>
</ul>
</div>
The invalid-tab used to work fine, and when the tab was invalid it was shown in red. Now it's no longer working and we suspect it's the newest version of AngularJS that broke that functionality. We're using v1.3.13.
Do you know what should be adjusted in that syntax above to make it work again (that is used in many pages of our application).
Here is the invalid-tab from our site.css:
.widget .invalid-tab * {
background-color: #F9EAF3;
/*color: #F9EAF3;*/
color: #d43f3a;
}
.widget .invalid-tab:hover * {
background-color: #E06B6C;
color: #ffffff;
}

Answer 1

The correct way to define ng-class is as follows: ng-class="{classname: expresstion}"
You also need to remove the asterisk from the css-selector - as you are selecting any child element. But the .invalid-tab has no child elements.
Another solution would be to move the .invalid-tab class out to the parent li-element
angular.module('myApp', [])
.directive('testApp', function(){
return {
link: function(scope) {
scope.form = {
editTemplateStartingValuesForm: {$invalid: true},
editTemplateGeneralForm: {$invalid: false}
};
}
};
});
.widget .invalid-tab {
background-color: #F9EAF3;
/*color: #F9EAF3;*/
color: #d43f3a;
}
.widget .invalid-tab:hover {
background-color: #E06B6C;
color: #ffffff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="myApp" class="widget" test-app>
<div class="col-lg-3 col-md-3 panel-container">
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a data-toggle="pill" href="#general" ng-class="{'invalid-tab': form.editTemplateGeneralForm.$invalid}">#Labels.general</a>
</li>
<li>
<a data-toggle="pill" href="#startingValues" ng-class="{'invalid-tab': form.editTemplateStartingValuesForm.$invalid}">#Labels.startingValues</a>
</li>
</ul>
</div>
</div>