When the value is true, I want to display a green text message and when it's false, I want it to be red.
This is my angular app:
In the controller, I declare a variable at the beginning and set it as true:
$scope.IsColor = true;
if (response.data.indexOf("Panelists successfully added") !== -1) {
$scope.IsColor = true;
$scope.Messages = response.data;
angular.element("#msg").focus()
return true;
}
else {
$scope.IsColor = false;
$scope.Messages = response.data;
angular.element("#msg").focus()
return false;
}
In HTML:
<div id="msg" ng-repeat="msg in Messages" ng-style="IsColor && {'color':'green'} || {'color': 'red'}">{{msg}}</div>
Despite the response being positive or negative, the text always shows up in red.
Can anyone figure out what the issue might be here?
Thank you, Erasmo
UPDATE
Additional html
<body>
<div class="container pt-5 pb-5">
<div class="row">
<div class="col-md-8">
<div ng-app="MyApp" ng-controller="MyController">
<div>
<input type="button" value="Upload" id="btn-upload" ng-click="Upload()" />
</div>
@* Excel Contents Table *@
<table class="table mt-4 mb-5" id="tblPanelists" ng-show="IsVisible">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tbody ng-repeat="p in Panelists">
<tr>
<td>{{p.Name}}</td>
<td><a href="mailto:{{p.Email}}">{{p.Email}}</a></td>
</tr>
</tbody>
</table>
<div id="msg" ng-repeat="msg in Messages" ng-style="IsColor && {'color':'green'} || {'color': 'red'}">{{msg}}</div>
<div class="mt-3">
<button type="submit" class="btn btn-admin-blue" id="btn-add-panelists" ng-click="AddPanelists()"
ng-disabled="disableSubmit">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
</body>
and the angularjs controller-function Add Panelists
The $scope.IsColor boolean is declared outside of the AddPanelists function within the controller and used inside the AddPanelists function.
AddPanelists function:
$scope.AddPanelists = function () {
$scope.arr = new Array;
angular.forEach($scope.Panelists, function (item) {
var b = {
name: item.Name.trim(),
email: item.Email.trim()
};
$scope.arr.push(b);
});
if ($scope.webinarId !== '') {
if ($scope.arr.length > 0) {
var data = JSON.stringify({ 'panelists': $scope.arr, 'webId': $scope.webinarId.split(' ').join('') });
//Call the services
$http.post('/meetings/panelists/home/createpanelists', data)
.then(function (response) {
if (response.data.indexOf("Panelists successfully added") !== -1) {
$scope.IsColor = true;
$scope.Messages = response.data;
angular.element("#msg").focus()
return true;
}
else {
$scope.IsColor = false;
$scope.Messages = response.data;
angular.element("#msg").focus()
return false;
}
}, function (response) {
$scope.IsColor = false;
$scope.Messages = "Service unavailable. Please try again.";
angular.element("#msg").focus()
return false;
});
} else {
$scope.IsColor = false;
alert('Please make sure to select a list of Panelists.');
$scope.Messages = 'Please make sure to select a list of Panelists';
angular.element("#msg").focus()
return false;
}
}
else {
$scope.IsColor = false;
alert('Please make sure to enter an ID');
$scope.Messages = 'Please make sure to enter a Zoom Webinar ID';
angular.element("#msg").focus()
return false;
}
};