在 AngularJS 模板中测试对象是否为空对象答案

【问题标题】：Test if an object is an empty object in a AngularJS template在 AngularJS 模板中测试对象是否为空对象
【发布时间】：2015-05-21 07:13:51
【问题描述】：

我在控制器中有一个简单的对象，有时可能为空 ({})。

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};
});

当对象是否为空时，我想在相应模板中隐藏或显示一些DOM元素。

我试图用一个简单的<div ng-if="vm.testObject"> 来做，但是当vm.testObject === {} 它在ng-if 中被认为是true。

<div ng-controller="TestController as vm">
  <div ng-if="vm.testObject">
    Test Object is not empty
  </div>
  <div ng-if="!vm.testObject">
    Test Object is empty
  </div>
</div>

有没有一种简单的方法来检查模板中的空对象？最好不要在范围内添加新变量。

这是一个正常工作的 Plunker： http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

【问题讨论】：

函数怎么样，例如vm.isEmpty = function(obj) { return Object.keys(obj).length === 0; }。然后你可以使用ng-if="vm.isEmpty(vm.testObject)"

标签： angularjs angularjs-templates

【解决方案1】：

您应该使用 AngularJs 过滤器：

Javascript：

app.filter('isEmpty', [function() {
  return function(object) {
    return angular.equals({}, object);
  }
}])

HTML模板：

<div ng-if="!(vm.testObject | isEmpty)">
  Test Object is not empty
</div>
<div ng-if="vm.testObject | isEmpty">
  Test Object is empty
</div>

更新 plunkr：http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

【讨论】：

你说得对，谢谢你帮助我！刚刚更正了答案。
对于 isNotEmpty return !angular.equals({}, object);
喜欢这个基于 Angular 框架工具的解决方案，我想它是在一个“规范的方式”来实现这个目标

【解决方案2】：

您可以将相等检查移至ng-if吗？

<div ng-controller="TestController as vm">
  <div ng-if="!equals({}, vm.testObject)">
    Test Object is not empty
  </div>
  <div ng-if="equals({}, vm.testObject)">
    Test Object is empty
  </div>
</div>

否则，在作用域上提供帮助器

app.controller('TestController', function() {
  var vm = this;

  vm.testObject = {};

  vm.empty = function() {
      return vm.testObject === {};
  };
});

然后

<div ng-controller="TestController as vm">
  <div ng-if="!vm.empty()">
    Test Object is not empty
  </div>
  <div ng-if="vm.empty()">
    Test Object is empty
  </div>
</div>

【讨论】：

这个助手真的有用吗？在 Javascript 中 {} === {} 给出错误。
vm.empty = function(object) { return Object.keys(object).length === 0; };

【解决方案3】：

这是一个旧线程，但我发现检查对象是否有键更容易。

<div ng-controller="TestController as vm">
  <div ng-if="Object.keys(vm.testObject).length">
    Test Object is not empty
  </div>
  <div ng-if="!Object.keys(vm.testObject).length">
    Test Object is empty
  </div>
</div>

简单易读。

【讨论】：

实际上，这对我不起作用。错误地投了赞成票。
它对我不起作用。使用 1.3.1 版本（是的，我知道那是旧版本..）

【解决方案4】：

这会奏效。检查长度

<div ng-if="!!vm.testObject && vm.testObject.length > 0">
  Test Object is not empty
</div>

【讨论】：

【解决方案5】：

您可以使用内置的 AngularJS json 过滤器将对象转换为 JSON 字符串，并进行如下比较：

<div ng-if="vm.testObject | json) != '{}'">
    Test Object is not empty
</div>

【讨论】：