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

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

像这样尝试

控制器

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

Answer 2

我喜欢做这样的事情 -

<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

如果对象是否为空，则将 return 设为真或假，并将其用作 ng-show.

的布尔值

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

how to NOT display empty objects from JSON file in DOM? Angular

api

json

angularjs

meetup