1

Note: The code below is just logic, so no parameters are defined. Although they are defined and being used actively in the same javascript file i'm in.

I'm new to javascript/angularjs (I don't even know what code this is) and as of now it's really throwing me a curveball because of the syntax and everything else going on. I have a main function in my dateTimeService.js file being called that returns another function that returns a true/false value based on if store is open or closed using logic below.

app.factory("dateTimeService", function() {

    return { 
        isHelperOpen: function(hoursString) {
            if (openTime <= nowTime && nowTime <= closeTime)
                  return true;
            else
                  return false;}
    }
}

How can I display a value such as "Open" or "Closed" based on the true/false value being returned by one of those functions? How is the html displayed? Do I create another function to do this? Any help is appreciated.. Thanks in advance!

<div class="availability">{{isHelperOpen(item)}}</div> --this is my long shot
cstorer
  • 63
  • 6
  • Can you show us the code for the controller that is in charge of the page where that HTML snippet lives? – wrshawn Dec 08 '15 at 03:26
  • `OpenClosed` – Paulo Scardine Dec 08 '15 at 03:26
  • @PauloScardine - It didn't work, would the foo values be just true/false? – cstorer Dec 08 '15 at 03:37
  • @user1403582 are you wanting the whole dateTimeService.js file? – cstorer Dec 08 '15 at 03:38
  • No, not the service, the controller that is in charge of this portion of the page. Do you have the application properly bootstrapped? i.e. you are defining an app module, you have an ng-app directive, you have ng-controller directives, etc? – wrshawn Dec 08 '15 at 03:43
  • It's 612 lines long and quite extensive. I'm adding a feature to previous code and trying to implement it using the functions currently there returning true/false values – cstorer Dec 08 '15 at 03:47

3 Answers3

1

I'd recommend an angular filter for something like this. It keeps your rendered value separate from your data value and it also helps keep your DOM & view controller much cleaner:

HTML

<div class="availability">{{item | helperOpenFilter}}</div>

Angular Filter

.filter( 'helperOpenFilter', function(dateTimeService){
    return function (obj){
       return dateTimeService.isHelperOpen(obj) ? 'Open' : 'Closed';
    }
}
jusopi
  • 6,791
  • 2
  • 33
  • 44
  • I like this.. Where would the .filter go? Inside the scope of app.factory("dateTimeService", function() { or inside the scop of isHelperOpen: function(hoursString) { – cstorer Dec 08 '15 at 03:43
  • Why would some consider this unorthodox? Based on my understanding, this is the perfect use for filters. Simple mapping from one value to another value for display purposes. – wrshawn Dec 08 '15 at 03:47
  • @user3258366 you would define the filter via the `angular.filter( 'filterName', function(...){ })`. NG Docs here - https://docs.angularjs.org/guide/filter – jusopi Dec 08 '15 at 04:44
  • @user1403582 honestly I dunno why I said that.... I guess it's because I haven't seen too many examples of `{{ objValue | filter }}`. It's usually on string values like so `{{ stringValue | filter }}`. I should amend that so as not to scare off people seeking a similar solution. – jusopi Dec 08 '15 at 04:48
1

You can use the ng-if:

 <span ng-if="isHelperOpen(foo)">Open</span>
 <span ng-if="!isHelperOpen(foo)">Closed</span>

or you can try:

 <span ng-show="isHelperOpen(foo)">Open</span>
 <span ng-hide="isHelperOpen(foo)">Closed</span>

or you can use filter.

Vishnu Mishra
  • 3,683
  • 2
  • 25
  • 36
1

Assuming your application is properly bootstrapped and you can call into your service from your controller, here is a greatly simplified fiddle that demonstrates what you want to do.

http://jsfiddle.net/90hozqr1/1/

The HTML:

<body ng-app="myApp">
  <div>
    <div ng-controller="MyController">
      <div>
        <span>{{callServiceWith(true) | displayBool}}</span>
        <span>{{callServiceWith(false) | displayBool}}</span> 
      </div>
    </div>
  </div>
</body>

The Javascript:

var myApp = angular.module("myApp", []);

myApp.factory("dateTimeService", function() {
    return { 
        isHelperOpen: function(hoursString) {
            return hoursString
        }
    }
})

myApp.controller("MyController", function($scope, dateTimeService) {
    $scope.callServiceWith = function(bool){
        return dateTimeService.isHelperOpen(bool);
    }
})

myApp.filter("displayBool", function(){
  return function(input) {
    if(input) {
      return "Open"
    } else {
      return "Closed"
    }
  }
})

Things to notice, there is a function in scope that is calling into the service: callServiceWith and it is being called from the template. The output is being run through a custom filter called displayBool.

wrshawn
  • 429
  • 2
  • 6
  • You would think this would be simple to implement but i'm having a hard time at that even. Thanks for the help! – cstorer Dec 08 '15 at 04:35
  • I'm curious why you'd put a method on the controller that calls the service rather than just inject the service in the filter like I did in my answer? Is there any performance overheads? After working with angular for almost 2 years, I've come to really try to keep the controllers very lightweight. – jusopi Dec 08 '15 at 15:20
  • You’re right in this case, since this is a simple service that isn’t doing anything complicated or making any requests. I guess I was biased when I wrote this example, because the services in the projects I work on tend to make requests and/or do a lot of processing. Controllers should be lightweight, but filters should be even more lightweight. To me, conceptually, a filter should only be about transforming an input to an output, and controllers should be about marshalling data. Injecting anything more than a simple helper service like this one into a filter would raise red flags. – wrshawn Dec 08 '15 at 15:42