I have been attempting to create an ng-table using ajax data with angularjs and rails. Despite successfully retrieving the data through an http get request, I am encountering difficulties appending it to my table as it always displays no records. Below is the code snippet in question. Any assistance would be greatly appreciated.
(function(){
var app = angular.module("apTags", ["ngTable"]);
app.controller("apTagsController", function($scope, $timeout, $http, ngTableParams){
$http.get('/owners/ap_tags/ap_tags_json.json')
.success(function(data, status) {
$scope.tags = data;
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {name:'asc'}
}, {
total: $scope.tags.length,
getData: function($defer, params) {
var orderedData = $scope.tags;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
});
});
})();<div class="container" ng-app="apTags">
<div ng-controller="apTagsController as list">
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>
<table ng-table="tableParams" id="table_tags" class="table table-condensed table-bordered table-hover">
<thead>
<tr>
<th>Tag</th>
<th>Share</th>
<th>Direct Product Count</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="tag in list.tags">
<td >{{tag.name}}</td>
<td >{{tag.share}}%</td>
<td ></td>
</tr>
</tbody>
</table>
</div>
</div>Additionally, here is the relevant Rails controller:
class Owners::ApTagsController < WlApplicationController
respond_to :json, only: [:ap_tags_json]
def index
respond_to do |format|
format.json do
@tags = ApTag.all
render :json => @tags.map(&:attributes)
end
format.html
end
end
def ap_tags_json
data = ApTag.all
respond_with(data) do |format|
format.json { render :json => data.map(&:attributes).as_json }
end
end
end