here my question:
I am trying to build a directive in angular, which would use an ng-table inside. I am using mocked data. The problem is that I cannot render data in the table. here is my directive:
;(function(app) {
app.directive('customTables', [
'NgTableParams',
function(NgTableParams) {
return {
restrict: 'E',
templateUrl: 'templates/directives/table_directive.html',
scope: {
},
link: function(scope) {
var dataset = [{
name: "Moroni50",
age: "50"
}, {
name: "Moroni49",
age: "49"
}];
scope.tableParams = new NgTableParams({}, {
data: dataset
});
}
};
}]);
})(app);
here is the html:
<table ng-table="tableParams" class="table table-bordered table-striped table-condensed">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">{{user.age}}</td>
</tr>
here is how I call it:
<custom-table></custom-table>
Any suggestions?
Replace
scope.tableParams = new NgTableParams({}, {
data: dataset
});
with
scope.tableParams = new NgTableParams({}, {
scope.data: dataset
});
and in html:
<tr ng-repeat="user in $data">
with
<tr ng-repeat="user in data">
Try this:
scope.data = [{
name: "Moroni50",
age: "50"
}, {
name: "Moroni49",
age: "49"
}];
scope.tableParams = new NgTableParams({}, {
data: scope.data
});
Try this instead
scope.tableParams = new NgTableParams({}, {
dataset: dataset
});
Related
I'm at my wits end with this issue and hoping someone can help. I've perused all the other answers and none of the solutions offered are resolving my problem. The following is the JSON string:
{
Description="XT86 EXTENDED WARRANTY (3 YEARS)",
Id=88,
InternalPartNumber="000-063",
ManufacturerPartNumber="000-063",
SellPrice=350.00,
Cost=280.00,
Category="Maintenance"
}
The following is my JS:
$('#products').dataTable({
serverSide: true,
ajax: {
url: "/Product/LoadProducts",
type: "POST",
datatype: "json"
},
columns: [
{ data: "id" },
{ data: "internalpartnumber" },
{ data: "manufacturerpartnumber" },
{ data: "description" },
{ data: "category" },
{ data: "sellprice" },
{ data: "cost" }
]
});
The HTML is as follows:
<div class="shadow-lg p-1 mb-1 bg-secondary rounded">
<table class="table table-hover table-striped table-bordered table-sm w-100" id="products">
<thead class="bg-primary">
<tr style="cursor:pointer;" class="text-light">
<th scope="col">Id</th>
<th scope="col">DCT Part #</th>
<th scope="col">MFG Part #</th>
<th scope="col">Description</th>
<th scope="col">Category</th>
<th scope="col">Sell Price</th>
<th scope="col">Cost</th>
</tr>
</thead>
</table>
</div>
The result is the following:
DataTables warning: table id=products - Requested unknown parameter
'internalpartnumber' for row 0, column 1. For more information about
this error, please see http://datatables.net/tn/4
Clicking OK on the error does load the table but 3 columns are missing data.
I've tried removing { data: "internalpartnumber" } but then I get the error on ManufacturingPartNumber. When I remove { data: "manufacturerpartnumber" } I get the error on SellPrice. When I remove { data: "sellprice" } I get no errors!
When I view the data from Visual Studio, the order the data is in is the same as I have it for each "index" order however when you expand each row index, it is being sorted.
Any help that can be provided would be much appreciated.
The LoadProducts method is as follows:
var results = (from p in _productRepository.GetAllActive
select new
{
p.Id,
p.InternalPartNumber,
p.ManufacturerPartNumber,
p.Description,
Category = p.ProductCategory.Display,
p.SellPrice,
p.Cost
});
Your Columns in your DataTable are not set up in an order as your data is
HTML
<table id="products" class="display" style="width:100%">
<thead>
<tr>
<th>Description</th>
<th>Id</th>
<th>InternalPartNumber</th>
<th>ManufacturerPartNumber</th>
<th>SellPrice</th>
<th>Cost</th>
<th>Category</th>
</tr>
</thead>
</table>
Jquery
var ret = {
data: [
{
Description: "XT86 EXTENDED WARRANTY (3 YEARS)",
Id: 88,
InternalPartNumber: "000-063",
ManufacturerPartNumber: "000-063",
SellPrice: 350.00,
Cost: 280.00,
Category: "Maintenance"
}
]
};
$('#products').dataTable({
data: ret.data,
columns: [
{ data: "Description" },
{ data: "Id" },
{ data: "InternalPartNumber" },
{ data: "ManufacturerPartNumber" },
{ data: "SellPrice" },
{ data: "Cost" },
{ data: "Category" }
]
});
I was finally able to figure this out. In Chrome, I selected the Network Option under the developer tools to examine the payload. What I noticed is that the first letter of the columns was lowercased which was different than what Visual Studio was showing.
I updated my columns definitions to the following:
columns: [
{ data: "id", name: "id", autoWidth: true },
{ data: "internalPartNumber", name: "internalPartNumber", autoWidth: true },
{ data: "manufacturerPartNumber", name: "manufacturerPartNumber", autoWidth: true },
{ data: "description", name: "description", autoWidth: true },
{ data: "category", name: "category", autoWidth: true },
{ data: "sellPrice", render: $.fn.dataTable.render.number(',', '.', 2, '$') },
{ data: 'cost', render: $.fn.dataTable.render.number(',', '.', 2, '$') }
]
and now everything works.
I am making ajax request with data send to method which returns data from database. I do get response (checked under network) but it doesn't get inserted into the table for some reason. Here is my code:
<table class="table table-hover" id="users-table">
<thead>
<tr>
<th>Id</th>
<th>Id_sport</th>
<th>Id_league</th>
<th>Id_user</th>
<th>Points</th>
<th>Created At</th>
<th>Updated At</th>
</tr>
</thead>
</table>
<script>
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
"ajax": {
url: "{!! route('get.leaderboardsData') !!}",
dataSrc: "",
data: { id_sport: "3" }
},
columns: [
{ data: 'id', name: 'id' },
{ data: 'id_sport', name: 'id_sport' },
{ data: 'id_league', name: 'id_league' },
{ data: 'id_user', name: 'id_user' },
{ data: 'points', name: 'points' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
And here is function that return data from database:
public function leaderboardsData(Request $request)
{
$sport_id = $request->get('id_sport');
if($sport_id==="0")
{
$query = DB::table('scores');
return DataTables::of($query)->toJson();
}
else
{
$query = DB::table('scores')->where('id_sport', '=',$sport_id);
return DataTables::of($query)->toJson();
}
}
I am developing in Laravel.
I've two stores in my controller:
$scope.categoryStore = [{id: 1, label: "A"}, {id: 2, label: "B"}, {id: 3, label: "C"}];
$scope.collectionStore = [{id: 1, categoryId: 1, name: "Test"}, {id: 1, categoryId: 2, name: "Test2"}];
In my view I have a ng-repeat for the collectionStore. Now I want to display the label of the categoryStore instead of the categoryId.
<tr ng-repeat="item in collectionStore">
<td>{{item.id}}</td>
<td>{{item.categoryid}} <!-- this would be the label --></td>
<td>{{item.name}}</td>
</tr>
My suggestion is to create a function to handle this and use the $filter within that function.
In your view:
<tr ng-repeat="item in collectionStore">
<td>{{item.id}}</td>
<td>{{getCategoryLabel(item.categoryId)}}</td> <!-- handle this with a function -->
<td>{{item.name}}</td>
</tr>
Then in your controller:
$scope.getCategoryLabel = function(categoryId) {
var category = $filter('filter')($scope.categoryStore, { id: categoryId }, true);
if (category.length) return category[0].label;
}
I am trying to manipulate HTML5's audio element on an Angular backend.
(not a developer myself)
Using Angular-filter or any workaround to $key,
I would like to search by word.$key and not by the property 'value'.
var app = angular.module("app", ['angular.filter']);
app.controller("myCtrl", function($scope) {
$scope.words = {
'art': [{
'value': 'art',
'lang': 'english'
}],
'lamp': [{
'value': 'lamp',
'lang': 'english'
}, {
'value': 'lámpara',
'lang': 'espanol'
}],
'window': [{
'value': 'window',
'lang': 'english'
}, {
'value': 'ventana',
'lang': 'espanol'
}],
'bicycle': [{
'value': 'bicicleta',
'lang': 'espanol'
}]
};
$scope.play = function(id) {
document.getElementById(id).play()
};
});
app.filter('trustedAudioUrl', function($sce) {
return function(path, audioFile) {
return $sce.trustAsResourceUrl(path + audioFile);
};
});
app.directive('audios', function($sce) {
return {
restrict: 'AE',
scope: {
code: '=',
extra: '='
},
replace: true,
template: '<audio id="{{code}}-{{extra}}" ng-src="{{url}}"></audio>',
link: function(scope) {
scope.$watch('extra', function(newLang, oldLang) {
scope.$watch('code', function(newVal, oldVal) {
var prefix = 'http://www.almatsuy.com/Johanna/sound/words/';
if (newVal !== undefined) {
scope.url = $sce.trustAsResourceUrl(prefix + newLang + "/" + newVal + ".mp3");
}
})
});
}
};
});
td button {
text-transform: capitalize;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<div ng-repeat="word in words">
<audios ng-repeat="audio in word" code="word.$key" extra="audio.lang" />
</div>
<input type="text" ng-model="searchKey" placeholder="search by key" />
<table>
<tbody ng-repeat="word in words | toArray: true">
<tr ng-repeat="t1 in word | fuzzyBy: 'value': searchKey">
<th>{{word.$key}} -- {{t1.lang}}</th>
<td>
<button ng-click="play(word.$key+'-'+t1.lang)">{{t1.value}}</button>
</td>
</tr>
</tbody>
</table>
</div>
I believe this might be something to do with old angular version.
I tried your code in JSFiddle, and in where i used Angular in version 1.1.1 it does not work, but as soon as i change version to 1.2.1 it works fine
When I change selection in column B, the text in column A should change too, but not.
Why?
HTML:
<table>
<thead>
<tr>
<th style="width: 100px;">A</th>
<th style="width: 100px;">B</th>
</tr>
</thead>
<tbody data-bind="foreach: Data">
<tr>
<td><span data-bind="text: idOpt"></span></td>
<td><select data-bind="options: $root.MyOptions, optionsText: 'name', optionsValue: 'id', value: idOpt"></select></td>
</tr>
</tbody>
</table>
JS:
function AppViewModel() {
var self = this;
self.MyOptions = ko.observableArray([
{id: 'a1', name: 'One'},
{id: 'a2', name: 'Two'},
{id: 'a3', name: 'Three'}
]);
self.Data = ko.observableArray([
{idOpt: 'a1'},
{idOpt: 'a2'},
{idOpt: 'a1'}
]);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
http://jsfiddle.net/bnowicki/CrVBr/2/
Please help.
You must declare the items in your Data array as observables if you want them to bind/update.
function AppViewModel() {
var self = this;
self.MyOptions = ko.observableArray([
{id: 'a1', name: 'One'},
{id: 'a2', name: 'Two'},
{id: 'a3', name: 'Three'}
]);
self.Data = ko.observableArray([
{idOpt: ko.observable('a1')},
{idOpt: ko.observable('a2')},
{idOpt: ko.observable('a1')}
]);
}
var vm = new AppViewModel();
ko.applyBindings(vm);
The Knockout documentation shows you the difference between using plain models, and then models with observables http://knockoutjs.com/documentation/observables.html