如何使用 angular 或 javascript 显示基于 true/false return 的 html 中的值？

Question

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

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

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

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

如何根据其中一个函数返回的 true/false 值显示 "Open" 或 "Closed" 等值？ html 是如何显示的？我是否创建另一个函数来执行此操作？感谢您的帮助。提前致谢！

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

Answer 1

对于这样的事情，我建议使用 angular 过滤器。它使您的渲染值与您的数据值分开，它还有助于使您的 DOM 和视图控制器更干净：

HTML

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

Angular 过滤器

.filter( 'helperOpenFilter', function(dateTimeService){
    return function (obj){
       return dateTimeService.isHelperOpen(obj) ? 'Open' : 'Closed';
    }
}

Answer 2

您可以使用 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>

或者您可以使用过滤器。

Answer 3

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

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.

的自定义过滤器输出运行

如何使用 angular 或 javascript 显示基于 true/false return 的 html 中的值？

How do I use angular or javascript to display value in html based on true/false return?

html

javascript

function

angularjs

angularjs-ng-show