Kiểm tra nếu đối tượng là một đối tượng trống trong mẫu AngularJS

Question

Tôi có một đối tượng đơn giản trong bộ điều khiển đôi khi có thể trống ({}).

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

    vm.testObject = {}; 
}); 

Tôi muốn ẩn hoặc hiển thị một số phần tử DOM trong mẫu tương ứng khi đối tượng trống hoặc không.

Tôi đã cố gắng làm điều đó với một đơn giản <div ng-if="vm.testObject"> nhưng khi vm.testObject === {} nó được coi là true trong 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> 

Có cách nào đơn giản để kiểm tra đối tượng trống trong mẫu không? Tốt hơn là không thêm các biến mới vào phạm vi.

Đây là một Plunker làm việc: http://plnkr.co/edit/Qed2MKmuedcktGGqUNi0?p=preview

Answer 1

Bạn có ok với cách di chuyển séc bình đẳng với 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> 

Nếu không, cung cấp một helper trên phạm vi

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

    vm.testObject = {}; 

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

sau đó

<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

Bạn nên sử dụng một bộ lọc AngularJs:

Javascript:

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

Html mẫu:

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

Cập nhật plunkr: http://plnkr.co/edit/J6H8VzUKnsNv1vSsRLfB?p=preview

Answer 3

này sẽ làm việc. kiểm tra chiều dài

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