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.
Related
I tried to make a html table using java script
function CreateTable(data) {
alert(data);
/*
1 - Loop Through Array & Access each value
2 - Create Table Rows & append to table
*/
for (var i in data) {
var row = `<tr>
<td>${data[i].Billing_Count}</td>
<td>${data[i].Flag_Type}</td>
</tr>
`
var table = $("#table-body")
table.append(row)
}
}
and my html :
<div id="chartdiv">
<table id="our-table">
<thead>
<tr>
<th>میزان مصرف</th>
<th>نوع مشترک</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
i used the alert() in my js to see if my data can be read, and it was ok. but still there were no result in my web page and the table-body's div.
I also have no specific error
Two issues in your code:
You are missing the id symbol (#) in the selector, should be $("#table-body").
You have to close the row with </tr>.
You're missing a # in your selector.
$("#table-body") or document.querySelector("#table-body") will fix it.
https://codepen.io/Choppy/pen/eYzLMgL
issue 1: - while creating the row, you missed out the end tr tag
issue 2: - $("table-body") - # symbol was missing.
function CreateTable(data){
/*
1 - Loop Through Array & Access each value
2 - Create Table Rows & append to table
*/
for (var i in data){
var row = `<tr>
<td>${data[i].Billing_Count}</td>
<td>${data[i].Flag_Type}</td> </tr>
`
var table = $("#table-body");
table.append(row)
}
}
const data = [{Billing_Count: 'Count1', Flag_Type: 'Flap1'},
{Billing_Count: 'Count2', Flag_Type: 'Flap2'},
{Billing_Count: 'Count2', Flag_Type: 'Flap2'}]
CreateTable(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chartdiv">
<table id="our-table">
<thead>
<tr>
<th>میزان مصرف</th>
<th>نوع مشترک</th>
</tr>
</thead>
<tbody id="table-body">
</tbody>
</table>
</div>
I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});
To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />
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 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
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>