I want to create a table with products on a certain menu of a store.
The table is divided by categories (product categories) and for every category the desired products should be shown under his category.
Something like:
I am able to get the different categories in my html but when I want to use ng-repeat on table rows or table headers I get nothing...
<table class="table table-hover">
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-app="categories" ng-cloak="" ng-controller="category" ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
AngularJS
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
$scope.categories = results.data;
for(var i = 0; i < $scope.categories.length; i++){
var categories = $scope.categories[i];
}
});
});
What is going wrong here?
Try this following code:
categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
var serviceBase = 'api/';
$http.get(serviceBase + 'categories').then(function (results) {
var categorie = results.data;
for(var i = 0; i < categorie.length; i++){
$scope.categories = categorie[i];
}
});
});
I found the solution myself:
<table ng-app="categories" ng-cloak="" ng-controller="category">
<tr>
<th>Menu items</th>
</tr>
<tr ng-repeat= "c in categories">
<th>{{c[1]}}</th>
</tr>
You shouldn't have ng-repeat of on your ng-app & ng-controller div. Even you don't need to do for loop. You categories does have category in it. You can access those inside ng-repeat using c only no need to specifying any index in it.
Markup
<body class="table table-hover" ng-app="categories" ng-cloak="" ng-controller="category" >
<tr>
<th colspan="5">Menu items</th>
</tr>
<tr ng-repeat="c in categories">
<th>{{c}}</th>
</tr>
</table>
</body>
Related
I am having an array which looks something like this,
var object = [ "ABCD" , "EFGH" , "IJKL", "MNOP", "QRST", "UVWX" ];
$scope.object = object;
I want to use ng-repeat to make a table and each row in table should consist of 3 columns.
The table should look like this,
Name Numb Type
ABCB EFGH IJKL
MNOP QRST UVWX
This is what my table looks like,
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object">
<td>{{x}}</td>
</tr>
I am not able to maintain 3 items per row here.
To do this you will simply need to update $scope.object with a nested array of size 3, so that we can print the first three items in each row like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in object">
<td>{{x[0]}}</td>
<td>{{x[1]}}</td>
<td>{{x[2]}}</td>
</tr>
</tbody>
</table>
</div>
</section>
If you wan to make td also dynamic, you can use ng-repeat for table cells also like:
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
var object = ["ABCD", "EFGH", "IJKL", "MNOP", "QRST", "UVWX"];
// Update array to size of three items instead like
var size = 3;
$scope.object = [];
for (var i = 0; i < object.length; i += size) {
$scope.object.push(object.slice(i, i + size));
}
});
table{border-collapse:collapse;width:100%}
table td,table th{border:1px solid #ddd;padding:8px}
table th{padding-top:12px;padding-bottom:12px;text-align:left;background-color:#4caf50;color:#fff}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp">
<div ng-controller="AppCtrl">
<table>
<thead>
<tr>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in object">
<td ng-repeat="cell in row">{{cell}}</td>
</tr>
</tbody>
</table>
</div>
</section>
You can solve it by the view side:
<thead>
<th>Name</th>
<th>Numb</th>
<th>Type</th>
</thean>
<tr ng-repeat = "x in object" ng-if="$index % 3 === 0">
<td>{{object[$index]}}</td>
<td ng-if="object[$index + 1]">{{object[$index + 1]}}</td>
<td ng-if="object[$index + 2]">{{object[$index + 2]}}</td>
</tr>
Basically, i have a structure like this example
Every cell of last column needs to have this formula:
value[i][2] = value[i-1][2] + value[i][0] - value[i][1]
I'm actually having 2 problems. The first one comes when i just try to program the first row of the table. What's wrong with this extremely simple thing?
angular.module('calc', [])
.controller('cont', function($scope) {
$scope.addNumbers = function() {
var c = aCom[30][5];
var a = parseFloat($scope.entrata1);
var b = parseFloat($scope.uscita1);
return c+a-b;
}
});
considering entrata1 and uscita1 as they are value[0][0] and value[0][1].
But most important, how can I extend the formula to all other rows? Consider that every row except the first one is created dinamically with an appendChild()function to the body, do i have to use at every appended item the function setAttribute("ng-model","entrata")?
Thanks
I would suggest forget appendchild. Use ng-repeat and add rows adding to the scope
like this
angular.module('plunker', []).controller('tableCtrl', function($scope,$filter) {
$scope.rows = [{'a': 0,'u': 300},{'a': 0,'u': 150},{'a': 200,'u': 0},{'a': 0,'u': 300}];
$scope.rowscalc = function(val){
var total=0;
angular.forEach($scope.rows, function(values, key){
if(key<=val) total += values.u-values.a;});
return total;
};
$scope.addRowM = function(){
$scope.rows.push({'a': 0, 'u': 0});
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="plunker" ng-controller="tableCtrl">
<table class="table">
<thead>
<tr>
<td class="dthead">A</td>
<td class="dthead">U</td>
<td class="dthead">Total</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td><input type="number" ng-model="row.a"/></td>
<td><input type="number" ng-model="row.u"/></td>
<td>{{rowscalc($index)}}</td>
</tr>
<tr>
<td colspan="3">
<button ng-click="addRowM()">Add Row</button>
</td>
</tr>
</tbody>
</table>
</div>
you can check in plunker
I would like to know why my items aren't showing on the DOM. Although ng-repeat is making new table rows. When I console log books it shows up fine but not with ng-repeat. Console Log
HTML
<table class="table table-bordered table-light table-hover">
<tbody id="tableBookSearch">
<tr ng-repeat="(key, value) in books"><td>key : {{key}} value: {{value}}</td></tr>
</tbody>
</table>
JS
$.getJSON(googleAPI, function(response){
$scope.books = [];
for(var i = 0; i < response.items.length; i++){
$scope.books.push(response.items[i]);
console.log('pushed book : ' + i);
}
$scope.$apply();
console.log('scope applied');
console.log($scope.books);
});
UPDATE:
I tried doing this with a normal array and it also didn't show data. The reference isn't null either.
<table class="table table-bordered table-light table-hover">
<tbody id="tableBookSearch">
<tr ng-repeat="(key, prop) in books">
<td> Key : {{key}}</td>
<td ng-repeat="value in books[key]> value : {{value }}</td>
</tr>
</tbody>
</table>
https://www.w3schools.com/angular/ng_ng-repeat.asp
Instead using ng-repeat go for ng-options in angular find #https://docs.angularjs.org/api/ng/directive/ngOptions
The environment I'm coding in is Angular2 and I thought it to be AngularJS. ng-repeat is a directive of AngularJS and to do something similar I would have to use *ngfor.
Is there a way in AngularJS that I can dynamically ID or in a dynamic table? I have this table that dynamically adds rows.
<table class="table table-striped">
<thead>
<tr>
<th style="text-align:center">{{nameBlue}}</th>
<th style="text-align:center">Round</th>
<th style="text-align:center">{{nameRed}}</th>
</tr>
</thead>
<tbody class="tablerows">
<tr ng-repeat="x in tableArray track by $index">
<td>Red Corner</td>
<td>Round {{$index}}</td>
<td>Blue Corner</td>
</tr>
</tbody>
</table>
and my script
//Create the module
var myApp = angular.module("myModule", []);
//Create the controller and register the module in one line
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS tutorial";
$scope.score = [1,2,3,4,5,6,7,8,9,10];
$scope.rounds = [1,2,3,4,5,6,7,8,9,10,11,12];
$scope.selectedRounds = 0;
$scope.tableArray = [];
$scope.getRoundsArray = function() {
$scope.tableArray = new Array( $scope.selectedRounds * 1);
}
});
So the amount of rows in the table are dynamically selected and added. Red Corner and Blue Corner will be replaced with drop down lists which have a 1 to 10 value. At the end of the table I will sum the drop down list values so I want to be able to do math on round1Red + round2Red .. and so on. Is there a way I can dynamically assign IDs to each when the table is created?
You can dynamically add IDs to the table like so:
<tr ng-repeat="x in tableArray track by $index">
<td id="redCorner{{$index}}">Red Corner</td>
<td>Round {{$index}}</td>
<td id="blueCorner{{$index}}">Blue Corner</td>
</tr>
This should give you unique red and blue corner IDs for each row of the table in the form of redCorner0, blueCorner0, redCorner1.... Let me know if this helps.
I am using angularJS and smart table framework to manage my table in html:
The table rows are selectable using SmartTable attribute : st-select-row="row".
after user selects rows and click "add" button the selected data registered to some other list.
I don't want to remove added rows from table but I do want them to be not selectable.
This is code example:
HTML:
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<table id="Table" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection">
<thead>
<tr>
<th st-sort="farmName">Farm Name</th>
<th st-sort="FarmDescription">Description</th>
<th st-sort="DataCenter">DC</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row" st-select-mode="multiple" ng-repeat="row in displayedCollection">
<td ng-bind="row.farmName">{{row.farmName}}</td>
<td ng-bind="row.FarmDescription"></td>
<td ng-bind="row.DataCenter"></td>
</tr>
</tbody>
</table>
<button id="add" ng-click="add(displayedCollection)"> add </button>
<li>
<ul ng-bind="row.farmName" ng-repeat="row in added"></ul>
</li>
</body>
JavaScript:
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope) {
$scope.rowCollection = [
{farmName: 'farm1', FarmDescription: 'some farm1', DataCenter: 'London'},
{farmName: 'farm2', FarmDescription: 'some farm2', DataCenter: 'Paris'},
{farmName: 'farm3', FarmDescription: 'some farm3', DataCenter: 'Berlin'}
];
$scope.added = [];
$scope.add = function(rows){
angular.forEach(rows,function(row){
if (row.isSelected === true){
row.isSelected = false;
var index = $scope.added.indexOf(row);
if(index === -1){
$scope.added.push(row);
// row.disableSelection this is what i want to do
}
}
});
};
});
How can I implement such behavior?
plunker code:plunker
Thanks
Dima
You can add condition like
<tr st-select-row="isSelectableRow(row)" st-select-mode="multiple" ng-repeat="row in displayedCollection">
and in the controller
$scope.isSelectableRow = function (row) {
if (~$scope.added.indexOf(row))
return false;
return row;
}
And also, you have incorrect html
<li><ul>..</ul></li>
change it to
<ul><li>..</li></ul>
Working example here
can be done using the attribute st-select-row:
for example prevent the second row to be selectable
<tr st-select-row="$index != 1 ? row : null" st-select-mode="multiple" ng-repeat="row in displayedCollection">
plunker