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

【问题标题】：How do I use angular or javascript to display value in html based on true/false return?如何使用 Angular 或 javascript 根据真/假返回在 html 中显示值？
【发布时间】：2015-12-08 03:22:12
【问题描述】：

注意：下面的代码只是逻辑，所以没有定义参数。尽管它们是在我所在的同一个 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

【问题讨论】：

您能否向我们展示负责该 HTML sn-p 所在页面的控制器的代码？
<span ng-show="isHelperOpen(foo)">Open</span><span ng-hide="isHelperOpen(foo)">Closed</span>
@PauloScardine - 没用， foo 值是否只是真/假？
@user1403582 你想要整个 dateTimeService.js 文件吗？
不，不是服务，而是负责页面这一部分的控制器。您是否正确引导了应用程序？即你正在定义一个应用程序模块，你有一个 ng-app 指令，你有 ng-controller 指令等等？

标签： javascript html angularjs function angularjs-ng-show

【解决方案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 的自定义过滤器运行。

【讨论】：

你会认为这很容易实现，但我什至很难做到。感谢您的帮助！
我很好奇你为什么要在调用服务的控制器上放置一个方法，而不是像我在回答中那样将服务注入过滤器？是否有任何性能开销？在使用 Angular 近 2 年之后，我开始真正尝试让控制器保持非常轻量级。
在这种情况下你是对的，因为这是一个简单的服务，不会做任何复杂的事情或发出任何请求。我想我在写这个例子的时候是有偏见的，因为我工作的项目中的服务倾向于发出请求和/或进行大量处理。控制器应该是轻量级的，但过滤器应该更加轻量级。对我来说，从概念上讲，过滤器应该只是将输入转换为输出，而控制器应该是关于编组数据。向过滤器中注入除了像这样的简单帮助服务之外的任何东西都会引发危险信号。

【解决方案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>

或者你可以使用过滤器。

【讨论】：

ng-if 存在性能问题：它在 DOM 中删除/插入元素，这是一个非常昂贵的操作。

【解决方案3】：

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

HTML

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

角度滤镜

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

【讨论】：

我喜欢这个。.filter 会去哪里？在 app.factory("dateTimeService", function() { 或 isHelperOpen 的范围内：function(hoursString) {
为什么有些人会认为这是非正统的？根据我的理解，这是过滤器的完美用途。出于显示目的，从一个值到另一个值的简单映射。
@user3258366 您可以通过angular.filter( 'filterName', function(...){ }) 定义过滤器。 NG 文档在这里 - docs.angularjs.org/guide/filter
@user1403582 老实说我不知道我为什么这么说......我想这是因为我没有看到太多<elem>{{ objValue | filter }}</elem> 的例子。它通常在字符串值上，例如<elem>{{ stringValue | filter }}</elem>。我应该修改它，以免吓跑寻求类似解决方案的人。