I have created my very first app where users can upload their avatars and set their gender. If a user (in this case, a girl) does not upload an avatar, I want to check the JSON data for their gender information. Based on this gender information, I want to display the URL to the default female avatar.
Take a look at my Controller Code:
$scope.getUserImage = function (user) {
if (user.avatar) {
return user.avatar;
} else {
return '/images/icons/user-' + user.gender + '.svg';
}
};
$scope.schueler = [
{
firstName: 'Sven',
lastName: 'Wauback',
gender: 'male',
avatar: 'url to avatar',
notice: 'Almost done with theory'
},
{
firstName: 'Sonja',
lastName: 'Flockenbarsch',
gender: 'female',
avatar: 'url to avatar',
notice: 'Needs extra practice hours'
},
{
firstName: 'Lisa',
lastName: 'Weber',
gender: 'female',
avatar: '',
notice: 'Not interested in photo submission'
},
{
firstName: 'Manuel',
lastName: 'Bürstenkrieger',
gender: 'male',
avatar: 'url to avatar',
notice: 'Thinks he's the coolest'
}
];
Now let's take a look at the View File:
<md-list-item ng-repeat="item in schueler" class="md-2-line" ng-click="null">
<img ng-src="getUserImage(user)" class="md-avatar" alt="{{item.firstName}} {{item.lastName}}"/>
<div class="md-list-item-text" layout="column">
<h3>{{item.firstName}} {{item.lastName}}</h3>
<p>{{item.notice}}</p>
</div>
<md-divider></md-divider>
</md-list-item>
I attempted to create a function above, but it doesn't seem to be working. As I am not familiar with JavaScript, I believe my approach is incorrect. Can someone guide me on the correct way to achieve this?