menu

CodePen

Hey Everybody! Come share Pens, ask front-end coding questions, and get/give feedback with your CodePen pals

Channels
Team

New to AngularJS, how to set class based on innerHTML?

January 23, 2020 at 7:41pm

New to AngularJS, how to set class based on innerHTML?

January 23, 2020 at 7:41pm (Edited 3 weeks ago)
I'm teaching myself AngularJS and I'm hung up. I'm generating a table of employees from an array, highlighting their competencies in certain programming languages.
for example, if the person is "pro" in Python, I want to set a class on the container div background to green (ex: class "pro" below), then a "novice" in AngularJS set it to orange.
The way my mind is trying to solve it is: on employee selected from drop down - If h4 innerhtml is not blank remove parent div classes and set to "skill-container text-center {{selectedEmployee.WhateverLanguageFromArray}}
I think I'm learning that ng-class and ngif could be part of the solution, but I'm having trouble understanding how to implement those into a working solution.
<div class="skill-container text-center pro"> <h3>Python</h3> <h4> {{selectedEmployee.Python}} </h4> </div>
The array is like so $scope.employees = [ {name : "John Doe", HTML : "Novice", CSS : "Pro", JS : "Pro", PHP : "Pro", NoSQL : "Pro", Python : "Pro"}, {name : "Lane Lowe", HTML : "NA", CSS : "Pro", JS : "Pro", PHP : "Pro", NoSQL : "Pro", Python : "novice"}, {name : "Shane Sholes", HTML : "Pro", CSS : "Pro", JS : "Pro", PHP : "Pro", NoSQL : "Pro", Python : "Pro"}, ];
I've only been doing Angular for 3 days, so please feel free to explain it to me like I'm new - because I am.
No messages yet