binding - 如何在 angularjs 的 $scope 中显示关于布尔变量的文本？

Question

假设我在 $scope 中有一个变量：

$scope.smsProfile.Active

这可以是真或假，我想在屏幕上显示一个关于它的值的文本。例如，如果为真则显示“配置文件处于活动状态”，如果为假则显示“配置文件未激活”。我怎样才能做到这一点？

我试过这样：

{{true:'Profile active', false:'Profile not active'}[$scope.smsProfile.Active]}

但它不起作用。

Answer 1

使用 ng-hide 和/或 ng-show 指令：

<span ng-show="smsProfile.Active">Profile active</span>
<span ng-hide="smsProfile.Active">Profile not active</span>

Answer 2

在控制器中添加一个方法：

$scope.smsProfile= {
        Active: true,
        statusText: function () {
            return $scope.foo.Active ? 'active' : 'not active';
        }
    }

然后在表达式中输出方法或ng-bind

<span>Profile is {{smsProfile.statusText()}}</span>

演示：http: //jsfiddle.net/zpfq4/

Answer 3

虽然这有点旧，但我想为任何最终来到这里的人参考这个：

如何在 angularjs 的 $scope 中显示关于布尔变量的文本？

另一个示例，使用三元运算符遵循上述帖子的逻辑如下。此示例基于带有切换按钮的复选框列表，用于选择全部或不选择。如果全部选中（长度相同），则选项文本将更改为Select None。

{{ (selected.length === options.length) ? 'Select None' : 'Select All'}}

按照这个逻辑，上面的代码也可以这样写：

{{ (selected.length !== options.length) ? 'Select All' : 'Select None'}}

有关这方面的更多信息，请参阅以下来自 Mozilla 的文章：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator