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

如果objet为空，则创建一个返回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>

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

2 个答案: