fragilewindows fragilewindows - 1 month ago 4x
AngularJS Question

How Do I Implement Inheritance in AngularJS?

I am trying to allow a user type to inherit properties from another user type. Staff Member is the parent object, Math Professor is the child object where Math Professor will inherit the properties of Staff Member. How would I implement this? Thanks for any help.

Code Snippet:

app.service( 'WorkService', function( $http ) {
var user;

this.isStaffMember = function() {
return user.type ==== 'StaffMember'
this.isMathProfessor = function() {
return user.type === 'MathProfessor'


[NOTE: I renamed isTeacher object to isStaffMember.]

I was thinking that I probably don't need anything to inherit any properties if I just change the code in my HTML. In the HTML, I am trying to implement it so that a StaffMember can only see the 2 options of adding and editing a course. But the Math professor can see the whole menu. It's not working though, the menu doesn't show at all when I add && WorkService.isMathProfessor().

<li ng-show="WorkService.isStaffMember()" && ng-show="WorkService.isMathProfessor()" class="dropdown">
<a class="dropdown-toggle">Courses
<li><a>New Course</a></li>
<li><a>Add Course</a></li>

<div ng-show="WorkService.isMathProfessor()">
<li class=""></li>
<li><a>Algebra I</a></li>
<li><a>Algebra II</a></li>


The changes definitely needed to be made within the HTML, not JavaScript function. The AngularJS directive (ng-show) needed to include isMathProfessor which I was starting to work out but the mistake I was making was using the && operator instead of the || operator.

<li ng-show="WorkService.isStaffMember() || WorkService.isMathProfessor()>

With this change, the first 2 choices are visible if it is either a Staff Member or Math Professor. But the last 3 choices are only available to the math professor.