Highlighting a field in angularJS if different value is present after comparison - html

Question

I have rows of data and each row has 2 columns.
<div class="row">
<div class="col-md-2"><strong>Natural ID:</strong></div>
<div class="col-md-4">{{ctrl.firstobject.naturalId}}</div>
<div class="col-md-2"><strong>ManulaID:</strong></div>
<div class="col-md-4">{{ctrl.firstobject.manualID}}</div>
</div>
Now, I would like to compare the value of the field called "NaturalID" with another Natural ID (accessed by ctrl.CustomObject.naturalid) and if these two values are different, I would like to highlight in red the field corresponding to Natural ID in the above HTML. How can I do this?

Answer 1

You can use ng-class something like
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.firstobject={
naturalId:1,
manualID:2
}
$scope.customObj={
naturalId:2
}
});
.red{
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl" >
<div class="row">
<div class="col-md-2"><strong>Natural ID:</strong>
</div>
<div class="col-md-4" ng-class="{'red':firstobject.naturalId !=customObj.naturalId}">{{firstobject.naturalId}}<span ng-if="firstobject.naturalId !=customObj.naturalId" class="glyphicon glyphicon-alert"></span>
</div>
<div class="col-md-2"><strong>ManulaID:</strong>
</div>
<div class="col-md-4">{{firstobject.manualID}}</div>
</div>
</div>