i have a question. Did not found answer before, or it wasn't exacly my problem.
I'm building static app, and i need to have table like this on the page. (They are just binded in the angular... I'm new in it and i have stuck.
<table class="table table-responsive table-striped">
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center">1st</th>
<th class="text-center">2nd</th>
<th class="text-center">3rd</th>
<th class="text-center">4th</th>
<th class="text-center">5th</th>
<th class="text-center">6th</th>
</tr>
</thead>
<tbody>
<tr>
<td>First header</td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute1" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute2" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[1].attribute3" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute1" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute2" /></td>
<td class="text-center"><input type="checkbox" ng-model="myModel.myData[2].attribute3" /></td>
</tr>
And it goes further... (ie. myModel.myData[3] (with 3 attributes), myModel.myData[4] (with 3 attributes) , myModel.myData[5] (with 3 attributes) )
Now... i have to count:
How much attributes1 (with whole myModel.MyData[1 to N]) are selected
How much attributes2 (with whole myModel.MyData[1 to N]) are selected
And so on...
All i got now, that i can accces to the value, by: {{ myModel.myData[1].attribute1 }}
But it returns me true/false (that is good) - but can't acces to this in controller. (My controller js file is almost clear, so i don't put it here)
If some1 could help me, where i can search solution i would be thankfull.
Look this:
when checkbox is clicked, this call the function for populate array with data of this. After you can get lenght of array using lenght.
var app = angular.module('StarterApp', []);
app.controller('AppCtrl', function($scope){
$scope.myModel = {myData1: [], myData2: [], myData3: []};
$scope.getChecked = function(){
console.log($scope.myModel.myData1);
console.log($scope.myModel.myData2);
console.log($scope.myModel.myData3);
}
$scope.toggleSelection = function (data, value) {
var idx = data.indexOf(value);
// is currently selected
if (idx > -1) {
data.splice(idx, 1);
}
// is newly selected
else {
data.push(value);
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="StarterApp" ng-controller="AppCtrl" class="table table-responsive table-striped">
<thead>
<tr>
<th class="text-center"><button type="button" ng-click="getChecked()"> Get checked </button></th>
<th class="text-center">1st</th>
<th class="text-center">2nd</th>
<th class="text-center">3rd</th>
<th class="text-center">4th</th>
<th class="text-center">5th</th>
<th class="text-center">6th</th>
<th class="text-center">7th</th>
<th class="text-center">8th</th>
<th class="text-center">9th</th>
</tr>
</thead>
<tbody>
<tr>
<td>
First header
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData1, 'check3')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData2, 'check3')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check1')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check2')"/>
</td>
<td class="text-center">
<input type="checkbox" ng-click="toggleSelection(myModel.myData3, 'check3')"/>
</td>
</tr>
</tbody>
</table>
If you need the count in your controller, then i guess you need to loup through the checkboxes. As in
$scope.attribute1Counter = 0;
angular.forEach($scope.myModel.myData, function(data){
if(data.attribute1 === true){
$scope.attribute1Counter++
}
});
Pull underscore.js into your project and use _.where (http://underscorejs.org/#where) to get the count in your controller.
Related
I have an order form in a flask-based app. The form starts out with a single row for the user to fill out with the name of a product, etc.
Then there is an Add Item button which sends an htmx request. It can be used to add an indefinite number of additional rows.
Here is the code:
<table class="table" >
<thead class="thead-dark">
<tr>
<th>Product Name</th>
<th>Unit</th>
<th>Quantity</th>
</tr>
</thead>
<form autocomplete="off" action="/neworder" method="POST">
<tr>
<td><input type="text" name="product" ></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units"></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
</tbody>
</table>
<p>Order Date: <input type="text" name="date"></p>
<input type="submit">
</form>
htmx returns this:
<tr>
<td><input type="text" name="product"></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units" ></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
As you see, all the inputs in a column have the same name.
When the form is submitted, I want to use flask request to do this:
#app.route('/neworder', methods=["POST"])
def new_order():
...
order_date = request.form.get("date")
items = request.form.getlist("product")
return f'<html>{order_date} - {items}</html>'
However, the only thing that ends up in items is what was entered into the first row...
I tried starting out with more than one row, and then things worked as expected, so it must have something to do with the part of the code returned by htmx...
I don't think this is relevant (?) but the function used by hx-get looks simply like this:
#app.route('/adminorder')
def admin_order():
return render_template('adminorder.html')
Your HTML template is invalid, you should move the form opening tag outside of the table. I've also added a missing <tbody> tag.
<form autocomplete="off" action="/neworder" method="POST">
<table class="table" >
<thead class="thead-dark">
<tr>
<th>Product Name</th>
<th>Unit</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="product" ></td>
<td><input type="text" name="unit"></td>
<td><input type="text" name="number_of_units"></td>
</tr>
<tr hx-target="this">
<td><button type="button" hx-get="/adminorder" hx-swap="outerHTML" >Add Item</button></td>
</tr>
</tbody>
</table>
<p>Order Date: <input type="text" name="date"></p>
<input type="submit">
</form>
I want to create a table with 2 columns: Name, Email. Everytime I press the edit button, I want to transform the td into editable inputs. The problem is that if I have more users and I press the edit button, all users will become editable, not just the selected one. How can I solve this problem?
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="!editUser">{{ user.name }}</td>
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.name"></td>
<td *ngIf="!editUser">{{ user.email }}
<td *ngIf="editUser"><input class=" form-control" size="1" type="text" [(ngModel)]="user.email"></td>
<td *ngIf="!editUser">
<a class="action-btn" (click)="onEdit()">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
editUser: boolean = false
onEdit() {
this.editUser = !this.editUser
}
How the table looks before pressing the red button
How the table looks after pressing the button
Thank you for your time! (this is what I want to achieve
Do you have an id for the user?
Then you could do something like:
<tbody>
<tr *ngFor="let user of usersList">
<td *ngIf="editUserId !== user.id">{{ user.name }}</td>
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.name"></td>
<td *ngIf="editUserId !== user.id">{{ user.email }}
<td *ngIf="editUserId === user.id"><input [(ngModel)]="user.email"></td>
<td *ngIf="editUser !== user.id">
<a class="action-btn" (click)="onEdit(user.id)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
and
editUserId: number;
onEdit(userId: number) {
this.editUserId = userId;
}
Try this, it will work for you.
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of usersList; index as i">
<td *ngIf="i!=selectedRowIndex">{{ user.name }}</td>
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.name"></td>
<td *ngIf="i!=selectedRowIndex">{{ user.email }}
<td *ngIf="selectedRowIndex == i"><input class=" form-control" size="1"
type="text" [(ngModel)]="user.email"></td>
<td>
<a class="action-btn" (click)="onEdit(i)">
<p class="material-icons pointer">edit</p>
</a>
</td>
</tr>
</tbody>
</table>
selectedRowIndex = -1
onEdit(rowIndex) {
this.selectedRowIndex = rowIndex;
}
I am trying to make a table with checkboxes on every row of the table.
I got an example(Code Example link), but I am not being able to get it done. I do not want to use the "data-url" as a source of the table. Except that, everything is accordingly with what I need.
I want to feed the "tbody" by myself.
Here is the example I am following: Code Example
What I want to accomplish:
<tbody>
<tr>
<!-- I do not know what to put over here in order to get it working-->
<td data-field="state" data-checkbox="true"></th>
<td>Foo</td>
<td>666</td>
<td>6969</td>
<td>Let there be rock</td>
</tr>
</tbody>
<!-- UPDATING CODE! -->
<table data-toggle="table" data-click-to-select="true" class="table">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" class="selectall" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">Huehuehue</td>
</tr>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">528</td> <td style="">122</td>
<td style="">huehuheheuhe</td>
</tr>
</tbody>
</table>
UPDATE NOTES
Now I can feed the "tbody" by myself (thanks to #Adriano Silva), but the "select all" checkbox is not working.
DONE
Example of the solution given by #AdrianoSilva:
JSFiddle Example
You can insert a row as example below
<table data-toggle="table" data-click-to-select="true" data-url="none">
<thead>
<tr>
<th class="bs-checkbox " data-field="state">
<div class="th-inner">
<input name="btSelectAll" type="checkbox">
</div>
<div class="fht-cell"></div>
</th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="bs-checkbox ">
<input data-index="0" name="btSelectItem" type="checkbox">
</td>
<td style="">bootstrap-table</td>
<td style="">526</td> <td style="">122</td>
<td style="">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)</td>
</tr>
</tbody>
</table>
Here is my UI
Here is my code
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th>Filler1</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageType</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
<tr>
<th>MessageLength</th>
<td><input id="123" type="text" class="input-sm"></td>
</tr>
</tbody>
</table>
</div>
How do I adjust the to make it smaller like following?
thank you
<div class="container">
<table id="headerTable" class="table table-bordered ">
<thead class="thead-default">
<tr>
<th colspan="2">電文Header</th>
</tr>
</thead>
<tbody>
<tr>
<th class="col-sm-1">Filler1</th>
<td class="col-sm-11">
<input id="123" type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageType</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
<tr>
<th class="col-sm-1">MessageLength</th>
<td class="col-sm-11">
<input type="text" class="input-sm">
</td>
</tr>
</tbody>
</table>
Just put in the Bootstrap Grid class so that <th> and <td> element would not be too wide.
See https://www.bootply.com/BLINHddRZV for output.
Edit: Did not see it is using bootstrap4. Please check this issue and the reply from mdo. Apparently, the grid class is no longer supported for table.
I have an html table that is cutting off all rows beyond the 200th. The rows are in fact there, because the list.js javascript search feature will find data in them if I search for it, but they don't display when the table loads.
Is this a limitation or setting in bootstrap or some other html thing?
Update - here is a simplified version of the table.
Also, the javascript libraries I'm using on this page that interact with the table are list.js and treetable.js.
I will note that I have seen this issue on another app I developed, but 99% of the time it wasn't an issue so it was never resolved. On this app in question, it will almost always be an issue.
<div class="table">
<div class="table-responsive" id="table3div">
<table class="table table-hover table-condensed tablesorter" id="table3">
<thead>
<tr>
<th>
<div class="checkbox custom-control custom-checkbox">
<label>
<input type="checkbox" id="checkAlltable3" />
<span class="custom-control-indicator"></span>
</label>
</div>
</th>
<th class="header">Description</th>
<th class="header">Status</th>
<th class="header">Associated With</th>
<th class="header">Assigned To</th>
<th class="header">ID</th>
<th class="header">Type</th>
<th class="header headerSortDown">Due Date</th>
</tr>
</thead>
<tbody class="list">
#for (int i = 0; i < Model.IssuesAndNotes.Count; i++)
{
<tr>
<td>
<div class="checkbox custom-control custom-checkbox">
<input id="checkBox" type="checkbox">
</div>
</td>
<td class="description">
Some data
</td>
<td class="status">
Some data
</td>
<td class="association">
Some data
</td>
<td class="assignedTo">
Some data
</td>
<td class="issueId">
Some data
</td>
<td class="type">
Some data
</td>
<td class="date">
Some data
</td>
</tr>
}
</tbody>
</table>
</div>
The default limit in list.js is 200 you can modify the limit in the parameters https://github.com/javve/list.js#parameters
For clarification look to the API docs on page options http://listjs.com/api/