1

注意：下面的代码只是逻辑，所以没有定义参数。尽管它们在我所在的同一个 javascript 文件中被定义并被积极使用。

我是 javascript/angularjs 的新手（我什至不知道这是什么代码），到目前为止，由于语法和其他所有事情，它真的让我很困惑。我在调用 dateTimeService.js 文件中有一个 main 函数，该函数返回另一个函数，该函数使用下面的逻辑根据商店是打开还是关闭返回真/假值。

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

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

如何根据这些函数之一返回的真/假值显示诸如“打开”或“关闭”之类的值？html是如何显示的？我是否要创建另一个函数来执行此操作？任何帮助表示赞赏..提前致谢！

<div class="availability">{{isHelperOpen(item)}}</div> --this is my long shot
4

3 回答 3

1

假设您的应用程序已正确引导并且您可以从控制器调用您的服务，这里有一个大大简化的小提琴，它演示了您想要做什么。

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

的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>

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"
    }
  }
})

需要注意的是，范围内有一个函数正在调用服务：callServiceWith并且它是从模板中调用的。输出正在通过一个名为 的自定义过滤器运行displayBool。

于 2015-12-08T04:11:23.493 回答
1

我会为这样的东西推荐一个角度过滤器。它使您的渲染值与您的数据值分开，它还有助于使您的 DOM 和视图控制器更加干净：

HTML

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

角度过滤器

.filter( 'helperOpenFilter', function(dateTimeService){
    return function (obj){
       return dateTimeService.isHelperOpen(obj) ? 'Open' : 'Closed';
    }
}
于 2015-12-08T03:35:57.187 回答
1

您可以使用 ng-if：

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

或者您可以尝试：

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

或者你可以使用过滤器。

于 2015-12-08T03:36:15.247 回答