AngularJs + ng-repeat issue

[victorhazbun]

Hello guys, I'm using AngularJs 1.4.0 and jquery.bootgrid 1.3.1. The problem I have is that I'm trying to display a collection of objects into the tbody but I get an un-expected result. This is how it looks https://www.evernote.com/l/AWh6DotIKwJNFKr7FrRNOpftzm_9iha_jqc

Please tell me what I'm doing wrong or how I can use the jquery-bootgrid plugin correctly. Thanks!!!

This is the Angular directive I'm using:

.directive('bootgridCommand', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            element.bootgrid({
                css: {
                    icon: 'md icon',
                    iconColumns: 'md-view-module',
                    iconDown: 'md-expand-more',
                    iconRefresh: 'md-refresh',
                    iconUp: 'md-expand-less'
                },
                formatters: {
                    "commands": function(column, row) {
                        return "<button type=\"button\" class=\"btn btn-icon command-edit\" data-row-id=\"" + row.id + "\"><span class=\"md md-edit\"></span></button> " +
                            "<button type=\"button\" class=\"btn btn-icon command-delete\" data-row-id=\"" + row.id + "\"><span class=\"md md-delete\"></span></button>";
                    }
                }
            });
        }
    }
})

This is the table HTML:

     <table bootgrid-command class="table table-hover table-condensed table-vmiddle">
        <thead>
          <tr>
            <th data-column-id="id" data-type="numeric">Door #</th>
            <th data-column-id="sender">Notes</th>
            <th data-column-id="received" data-order="desc">Status</th>
            <th data-column-id="commands" data-formatter="commands" data-sortable="false"></th>
          </tr>
        </thead>
        <tbody>
          <div ng-repeat="door in doors">
            <tr>
              <td>1</td>
              <td>Ramp</td>
              <td>Active</td>
            </tr>
          </div>
        </tbody>
      </table>

And this is my controller JS:

 'use strict';

  angular.module('dockStar.location_doors', ['ngRoute'])

  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/locations/:id/doors', {
      title: "Location Dock Doors",
      templateUrl: 'views/location_doors/location_doors.html',
      controller: 'LocationDoorsCtrl',
      data: {
        requiresLogin: true
      }
    });
  }])

  .controller('LocationDoorsCtrl', function LocationDoorsController($scope, store, growl, $routeParams, DoorFactory) {
    $scope.locationId = $routeParams.id;
    $scope.doors = DoorFactory.query({ companyId: store.get('company_id'), locationId: $scope.locationId });
  });

[victorhazbun]

I figured it out, this is the correct snippet to solve the initial issue:

                 <tr ng-repeat="door in doors">
                    <td>{{door.id}}</td>
                    <td>{{door.notes}}</td>
                    <td>{{door.deleted_at}}</td>
                  </tr>

Anyway I have another problem, the table says "No results found!" PLEASE tell me how to use Angular ng-repeat so it displays the list.

https://www.evernote.com/l/AWhm9In4_WxMk5D9Q5zCoX51ygoD1EHVW_Q

[victorhazbun]

I have figured out the "No results found!" by using the ajax feature like this:

.directive('bootgridCommand', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            $timeout(function(){
              element.bootgrid({
                  ajaxSettings: {
                    method: "GET",
                    cache: true
                  },
                  ajax: true,
                  url: scope.$eval(attr.apiUrl),
                  css: {
                      icon: 'md icon',
                      iconColumns: 'md-view-module',
                      iconDown: 'md-expand-more',
                      iconRefresh: 'md-refresh',
                      iconUp: 'md-expand-less'
                  },
                  formatters: {
                      "active": function(column, row) {
                        return row.deleted_at == "0" ? "Yes" : "No";
                      },
                      "commands": function(column, row) {
                          return "<button ng-click=\"alertme()\" type=\"button\" class=\"btn btn-icon command-edit\" data-row-id=\"" + row.id + "\"><span class=\"md md-check c-green\"></span></button>" +
                                                          "<button type=\"button\" class=\"btn btn-icon command-delete\" data-row-id=\"" + row.id + "\"><span class=\"md md-close c-red\"></span></button>";
                      }
                  }
              });
            });
        }
    }
})

My HTML:

    <table class="table table-striped table-vmiddle" bootgrid-command api-url="apiUrl">
        <thead>
            <tr>
              <th data-column-id="id" data-type="numeric" data-identifier="true">ID</th>
              <th data-column-id="notes">Notes</th>
              <th data-column-id="deleted_at" data-formatter="active">Active</th>
              <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
            </tr>
        </thead>
    </table>

The last problem I found is that ng-click does not trigger when I use the table command buttons. Any ideas?

[longntx]

There are some ways to solve this.

1. You can try ng-bind-html with $sce. Plunker https://plnkr.co/edit/?p=preview
2. You have to remove that ng-click and add this:

element.bootgrid({
//Your content
}).on("loaded.rs.jquery.bootgrid", function()
{
    /* Executes after data is loaded and rendered */
    grid.find(".command-edit").on("click", function(e)
    {
        alert("You pressed edit on row: " + $(this).data("row-id"));
    }).end().find(".command-delete").on("click", function(e)
    {
        alert("You pressed delete on row: " + $(this).data("row-id"));
    });
});