Hi there, I have a specific case that I'm struggling to find a solution for. I am using Angular with a Firebase back-end to retrieve true or false values from a variable called ref. The variable contains 4 properties with either true or false values -
{yesterdayAm: false, yesterdayPm: false, todayAm: false, todayPm: false}Despite getting the expected results when running the code simply, I'm having difficulty understanding how to handle these values using if or switch expressions on the Angular/Javascript side. Can someone assist me in returning the correct values?
Let's start with the view:
<div class="col-xs-6 ">
<div class="dexbowl"><img ng-src="{{ isFed('yesterdayAm') }}"/></div>
</div>
<div class="col-xs-6">
<div class="dexbowl"><img ng-src="{{ isFed('yesterdayPm') }}"/></div>
</div>
<div class="col-xs-5 col-xs-offset-1">
<div class="dexbowl"><img ng-click="feed('todayAm')" ng-src="{{ isFed('todayAm') }}"/></div>
</div>
<div class="col-xs-5">
<div class="dexbowl"><img ng-click="feed('todayPm')" ng-src="{{ isFed('todayPm') }}"/></div>
</div>
I am attempting to feed a dog by clicking a button. Different functions like isFed('[dayAm/Pm]') are triggered by the ng-src of the img tags and return image files depicting their states. These states are defined in the $scope:
var blueFilled = 'images/dexterbluefilled.svg';
var satBlueFilled = 'images/SATdexterbluefilled.svg'; /* not used yet */
var blueEmpty = 'images/dexterblueempty.svg';
var satBlueEmpty = 'images/SATdexterblueempty.svg'; /*not used yet */
The above function in the $scope returns the image paths according to the server state:
if (Fed.getInitState(when)) {
return blueFilled;
} else {
return blueEmpty;
};
You might be wondering about the Fed.getInitState(when) function which takes arguments like
todayAm/todayPm/yesterdayAm/yesterdayPmservice or factory named Fed, responsible for fetching data from Firebase.
getInitState: function(when) {
var value = ref[when];
return value;
},
The object ref includes the following properties:
{yesterdayAm: false, yesterdayPm: false, todayAm: false, todayPm: false}Here lies the problem:
While everything works fine up until now, I'm struggling to incorporate two additional image paths: satBlueEmpty and satBlueFilled.
I aim to display only the "sat" image paths for the properties yesterdayAm and yesterdayPm. I have tried using an if statement within the $scope to direct the blueEmpty and blueFilled images to todayAm and todayPm, while assigning the sat path variables to yesterdayAm and yesterdayPm.
Despite experimenting with switch and nested if statements, I haven't been able to achieve the desired results. As a newcomer to Javascript and Angular, this issue has left me stuck on my first full app project. Would appreciate any guidance on updating the values being returned from the Fed service in this scenario.
*edit
A nested if function was attempted but without success:
$scope.isFed = function(when, which) {}
if (Fed.getInitState(when)) {
if (which === sat) {
return satBlueFilled;
} else {
return blueFilled;
} else {
if (which === notSat);
return satBlueFilled;
} else {
return satBlueEmpty;
}
}
};
*edit 2
Following @Steve Lang's suggestion, I am exploring creating a switch statement inside Fed.getInitState to return values 1,2,3, or 4 to the controller function $scope.isFed. Here's what I have so far:
getInitState: function(when) {
var trueOrFalse = ref[when];
console.log('when: ' + when + ' ' + 'value: ' + value);
switch (trueOrFalse) {
case 'todayAm':
return 1;
case 'todayPm':
return 2;
case 'yesterdayAm':
return 3;
case 'yesterdayPm':
return 4;
}
},
Can I use an & operator in the cases to determine the value equal to when? It seems like an if statement nested within a switch may be necessary...