json - 如何不在 DOM 中显示 JSON 文件中的空对象？角

Question

我正在使用 Meetup API 显示成员照片

如您所见，某些对象不包含该属性，因此它在我的 DOM 上显示一个空白 div。我怎样才能只使用具有该属性的对象来获取 json 文件？

或者如果对象是空的，我怎么能不显示？

提前致谢。

JS

nameAppControllers.controller('MemberCtrl', function($scope, $http) {
    $http.jsonp('https://api.meetup.com/2/members?callback=JSON_CALLBACK&offset=0&format=json&group_id=8247622&only=photo&photo-host=public&page=80&order=joined&sig_')
         .success(function(data) {
             $scope.members = data.results;
             console.log(data.results);
         });
});

HTML

<div class="members" ng-controller="member in members">
    <div ng-repeat='member in members'>
      <div class='img-circle col-md-4'>
        <img ng-src="{{member.photo.highres_link}}">
      </div>
    </div>
</div>

Answer 1

我喜欢做这样的事情-

<div class="members" >
   <div ng-repeat='member in members'>
      <div class='img-circle col-md-4' ng-show="!checkObject(member)">
         <img ng-src="{{member.photo.highres_link}}">
      </div>
   </div>
</div>

控制器中的功能 -

$scope.checkObject = function(obj) {
    return angular.equals({}, obj);
};

JSFIDDLE

如果对象为空或不为空，则创建一个简单的函数以返回 true 或 false，并将其用作ng-show.

Answer 2

像这样试试

控制器

$scope.isEmpty = function(obj) {
    return Object.keys(obj).length == 0;
}

html

<div class="members" ng-controller="member in members">
   <div ng-repeat='member in members'>
      <div ng-if="!isEmpty(member)" class='img-circle col-md-4'>
         <img ng-src="{{member.photo.highres_link}}">
      </div>
   </div>
</div>