测试对象是否为 AngularJS 模板中的空对象

Question

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

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

Answer 1

您可以将相等性检查移至 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>

Answer 2

您应该使用 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

Answer 3

这会奏效。检查长度

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

Answer 4

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

<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>

它简单易读。

Answer 5

您可以使用内置的 AngularJS json 过滤器将对象转换为 JSON 字符串，然后像这样进行比较：

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

测试对象是否为 AngularJS 模板中的空对象

Test if an object is an empty object in a AngularJS template

angularjs

angularjs-templates