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

Question

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

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

  vm.testObject = {};
});

我想在对象为空时隐藏或显示相应模板中的一些DOM元素.

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

<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

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