I'm currently working on a simple Angular project where I need to dynamically color list items based on a function called in data-ng-class.
Below is an excerpt from my HTML file:
<div>
Rooms:<ul style="list-style:none;">
<li style="display:inline-block; padding:20px;"
data-ng-repeat="room in SingleDetailedCtrl.singleRooms"
data-ng-class="getClass('room')">
{{ room }}
</li>
</ul>
To return back, please <a ui-sref="plan">click here</a>
</div>
The respective controller code snippet:
myApp.controller("SingleDetailedController", function ($log) {
var singleSelf = this;
this.singleRooms = ["f1-101", "f1-110", "f2-203", "f3-321", "f3-302"];
this.sa = ["f1-101", "f2-203", "f3-302"];
this.sna = ["f1-110", "f3-321"];
this.getClass = function (room) {
console.log("sdc");
var color = red;
angular.forEach(singleSelf.singleRooms, function (value, key) {
if (value == room) {
console.log("sdc if");
color = green;
}
});
return color;
};
});
I seem to be facing an issue where the expected console output is not being generated. It appears that the getClass() function might not be getting called as intended.
Despite reviewing similar questions regarding this problem, I can't seem to identify where the issue lies within my code.
Your assistance in resolving this matter would be greatly appreciated.