如何使用angular或javascript根据真/假返回值在html中显示值？_Javascript_Html_Angularjs_Function_Angularjs Ng Show

如何使用angular或javascript根据真/假返回值在html中显示值？

javascript html angularjs function

如何使用angular或javascript根据真/假返回值在html中显示值？,javascript,html,angularjs,function,angularjs-ng-show,Javascript,Html,Angularjs,Function,Angularjs Ng Show,注意：下面的代码只是逻辑代码，因此没有定义参数。尽管它们是在我所在的同一个javascript文件中定义和积极使用的我对javascript/angularjs还不熟悉（我甚至不知道这是什么代码），到目前为止，由于语法和其他方面的原因，它真的给我带来了一个曲线球。我在dateTimeService.js文件中调用了一个主函数，该函数返回另一个函数，该函数使用下面的逻辑根据存储是否打开或关闭返回真/假值 app.factory("dateTimeService", function() {

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

我对javascript/angularjs还不熟悉（我甚至不知道这是什么代码），到目前为止，由于语法和其他方面的原因，它真的给我带来了一个曲线球。我在dateTimeService.js文件中调用了一个主函数，该函数返回另一个函数，该函数使用下面的逻辑根据存储是否打开或关闭返回真/假值

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

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

app.factory（“dateTimeService”，函数（）{
返回{
isHelperOpen:函数（小时字符串）{
if（openTime我建议使用角度过滤器来处理类似的问题。它可以将渲染值与数据值分开，并有助于使DOM&view控制器更干净：
HTML
<div class="availability">{{item | helperOpenFilter}}</div>

您可以在以下情况下使用ng：
 <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>

打开
关闭

或者您可以使用过滤器。
假设您的应用程序已正确引导，并且您可以从控制器调用您的服务，下面是一个大大简化的提琴，它演示了您要执行的操作

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>

需要注意的是，作用域中有一个函数正在调用该服务：callServiceWith
，它是从模板中调用的。输出是通过一个名为displayBool
的自定义过滤器运行的。您能给我们显示负责该HTML片段所在页面的控制器的代码吗？OpenClosed
@PauloScardine-它不起作用，foo值是否为真/假？@user1403582你想要整个dateTimeService.js文件吗？不，不是服务，是负责这部分页面的控制器。你是否正确引导了应用程序？也就是说，你正在定义一个应用程序模块，你有一个ng应用程序直接ive，你有ng控制器指令等等？我喜欢这样..过滤器会去哪里？在app.factory（“dateTimeService”，function（）{的作用域内还是在isHelperOpen:function（hourString）的作用域内{为什么有些人会认为这是非正统的？基于我的理解，这是对过滤器的完美使用。简单显示从一个值到另一个值以显示目的。@ USER 3258366，您将通过<代码>角过滤器（“过滤器名称”，函数（…）{}）定义过滤器。

.NG Docs here-@user1403582老实说，我不知道我为什么这么说……我想这是因为我没有看到太多的

{{objValue | filter}}

。它通常是在字符串值上，比如

{stringValue | filter}

。我应该修改它，以免吓跑寻求类似解决方案的人。

ng如果

有性能问题：它会删除/插入DOM中的元素，这是一个非常昂贵的操作。你可能会认为这很容易实现，但我甚至很难做到。谢谢你的帮助！我很好奇你为什么要把控制器上的一种方法，它调用服务，而不是像我在回答中所做的那样将服务注入过滤器？是否存在性能开销？在与angular合作近2年后，我开始真正尝试使控制器非常轻量级。在这种情况下，你是对的，因为这是一个简单的服务，不是做任何复杂的事情或发出任何请求。我想我在写这个例子时是有偏见的，因为我工作的项目中的服务倾向于发出请求和/或进行大量处理。控制器应该是轻量级的，但过滤器应该更轻量级。对我来说，从概念上讲，过滤器应该只涉及转换inp将ut转换为输出，控制器应该是关于编组数据的。向过滤器中注入像这样的简单帮助器服务以外的任何东西都会引起危险。

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

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

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