Remove exist tile

[mhipo1364]

Hi

I want to remove exist tile, how can I do this? after removing object from angular model, empty tile is still exist

[s-yadav]

Can you share your code snippet, so I can understand what exactly is going wrong.

[mhipo1364]

Yes sure

<ul itemscope itemtype="http://schema.org/ImageGallery" class="dynamic-grid" angular-grid="items" grid-width="236" gutter-size="10" angular-grid-id="gallery" on-scroll-bottom='loadMore()'>
            <li data-ng-repeat="item in items" class="grid photo grid-item-{{ item.id }}">
                <a href="{{ getCardUrl(item) }}">
                    <div class="photo-wrapper">
                        <a href="{{ getCardUrl(item) }}">
                            <img alt="{{ item.description }}" class="grid-img" itemprop="image" ng-click="showItem(item);" data-ng-src="{{ item.thumbnail_list[0].image_path }}" style="cursor: pointer;">
                        </a>
                    </div>
                    <div class="photo-description">
                        <!--<p itemprop="keywords">-->
                            <!--<a href="/category/{{ item.tag.id }}/{{ item.tag.name | slugify }}" ng-style="{'color': '#a4a4a4'}">-->
                                <!--<i class="zmdi zmdi-tag"></i>-->
                                <!--{{ item.tag.name }}-->
                            <!--</a>-->
                        <!--</p>-->
                        <p class="color-777">
                            {{ item.description }}
                        </p>
                    </div>
                    <div class="photo-credit">
                        <div class="like-box">
                            <!--<md-button ng-if="isLiked(item)" ng-click="unlikeContent(item);" class="md-icon-button" aria-label="Like">-->
                            <!--<i class="icon zmdi zmdi-hc zmdi-favorite mdc-text-grey-50"></i>-->
                            <!--</md-button>-->
                            <!--<md-button ng-if="isNotLiked(item)" ng-click="likeContent(item);" class="md-icon-button" aria-label="Unlike">-->
                            <!--<i class="icon zmdi zmdi-hc zmdi-favorite-outline mdc-text-grey-50"></i>-->
                            <!--</md-button>-->
                            <section class="photo-like-count">
                                <i class="fa fa-heart"></i>
                                <span>{{ item.like_count }} </span>

                            </section>
                        </div>
                    </div>

                    <!--<button class="btn btn-large btn-danger open" data-toggle="confirmation" data-original-title="Are you sure ?" title="" aria-describedby="confirmation35070">Default configuration</button>-->

                    <button ng-click="delete_item(item)" class="btn btn-danger" style="display: block; width: 100%; border-radius: 0 0 2px 2px !important; height: 41px;">Delete</button>
                </a>
            </li>
        </ul>

now, I want to delete one of the tiles in items, but blank tile still exist after deletion

[s-yadav]

Can you share delete_item method too,

[mhipo1364]

Sure

$scope.delete_item = function(item) {
            var res = confirm("Press a button!");
            if(res) {
                $http({
                    url: settings.api_base_url + 'user-cards/' + item.id,
                    method: 'DELETE',
                    crossDomain: true,
                    headers: {
                        'Authorization': 'Bearer ' + $window.sessionStorage.token,
                        'Content-Type': 'application/json'
                    }
                }).success(function (response) {
                    toastr.success("Your card successfully deleted", "Delete Card");
                    for(var j = 0 ; j < $scope.items.length; j++) {
                        if($scope.items[j].id === item.id) {
                            delete $scope.items[j];
                            angularGridInstance.gallery.refresh();
                            break;
                        }
                    }
                }).error(function(response) {

                });
            } else {

            }
        }

[s-yadav]

Problem is with delete $scope.items[j]; delete keyword is used to delete a property from an object, you should not use it for array.

Use $scope.items.splice(j,1) instead.

[mhipo1364]

@s-yadav Thanks man :+1:

[Tobias-v-f]

Hello! I do have a similar problem. I do remove the object from its array by calling "splice(index,1)". After that nothing changes though. I have to refresh the page for the change to take effect.

js delete function:

$scope.delete = function (fid, index) {
    Images.delete(fid)
    .success(function(data) {
    $scope.images.splice(index,1);
    //TODO: refresh gallery!
    })
    .error(function(data) {
     //TODO
    });
  };

Template:

<div class="row" data-ng-controller="MeCtrl">
  <div class="container-fluid">
    <div class="row content">

      <ul class="dynamic-grid" angular-grid="images" ag-grid-width="300" ag-gutter-size="10" ag-id="gallery" ag-refresh-on-img-load="false">
        <li class="grid" data-ng-repeat="image in images">
          <img ng-src="http://localhost:8080/{{image.fid}}" class="grid-img" data-actual-width = "{{image.actualWidth}}"  data-actual-height="{{image.actualHeight}}" />
          <div class="img-desc-wrap">
            <div class="title ng-binding">
              {{image.caption}}
              <div ng-controller="MeCtrl" style="float: right">
                <!-- Single button -->

                <div class="btn-group" uib-dropdown dropdown-append-to-body is-open="status.isopen">
                  <button id="btn-append-to-to-body" type="button" class="btn btn-default" style="border: 0px;" uib-dropdown-toggle ng-disabled="disabled">
                     <span class="glyphicon glyphicon-menu-hamburger"></span>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-to-body">
                    <li role="menuitem"><a>Show</a></li>
                    <li role="menuitem"><a>Share</a></li>
                    <li class="divider"></li>
                    <li role="menuitem"><a ng-click="delete(image.fid, $index)">Delete</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="shot-date ng-binding">
              Date: {{image.shotOn}}
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

[Luddinus]

Same issue here, I'm using angularGridInstance.myIdGallery.refresh() after removing an item (using splice) but it is not working

[jeevasusej]

Same issue here, I'm using angularGridInstance.myIdGallery.refresh() after removing an item (using splice) but it is not working

Did you solve this issue? I am having the same problem.

[s-yadav]

If you guys are changing $scope variable within some different event or callbacks, you may have to run digest cycle using $scope.$apply() or $scope.$digest();

[jeevasusej]

Please check the pull request.

If we listen the element removed, then refreshing the grid works.

https://github.com/s-yadav/angulargrid/pull/96