I am writing my first non-tutorial angular.js web app. I am using two smart-tables and checklist-model. Here is the first one that uses a st-safe-src of all_types that is an array of json objects that look like this ...
[
{
"_id": "56417a9603aba26400fcdb6a",
"type": "Beer",
"__v": 0
},
{
"_id": "56456140cb5c3e8f004f4c49",
"type": "Skiing",
"__v": 0
},
...
Here is the html for the table I use to display this data:
<table st-table="displayedCollection" st-safe-src="all_types" class="table table-striped">
<thead>
<tr>
<th st-sort="type">Types</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in displayedCollection">
<td><input type="checkbox" checklist-model="vendor.types" checklist-value="x.type">{{x.type}}</td>
</tr>
<tr><td>id ({{curid}}) {{vendor.types}}</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
This table looks like this when I load data into it. The checkboxes get checked to match the data from my model.
But when I try to do the same thing in a second smart table with more complete json objects that look like this ...
[
{
"_id": "569f047dd90a7874025b344e",
"product_title": "Plugs",
"product_img_001": "p001.jpg",
"product_img_002": "p002.jpg",
"product_vid_001": "bp.mov",
"__v": 0,
"product_sizes": [
"Large",
"Med.",
"Small",
"10.5"
],
"product_types": [
"Running Shoe"
]
},
{
"_id": "569f3958b108a7d70201b89a",
"product_title": "Back Scratcher",
"product_img_001": "http://itchy.png",
"product_img_002": "http://relief-at-last.png",
"product_vid_001": "my-itch",
"__v": 0,
"product_sizes": [
"Large"
],
"product_types": [
"Rocks"
]
}
]
Here's the html I am using to display this data in a smart table:
<table st-table="prodCollection" st-safe-src="all_products" class="table table-striped">
<thead>
<tr>
<th st-sort="type">Products</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in prodCollection">
<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x">{{x.product_title}}</td>
</tr>
<tr><td>{{vendor.products}}</td></tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
This table looks like this when I load data into it:
I had hoped that the checkbox would be checked, but they do not get checked.
If make this change ...
<td><input type="checkbox" checklist-model="vendor.products" checklist-value="x.product_title">{{x.product_title}}</td>
... the correct checkboxes get checked but just the product's title will be posted. What do I need to do to get the checkboxs to display checked and be able to post the whole product data?
I have added a plunker example: http://plnkr.co/edit/aPCEBV5e9Pb5np9iaY2l
You can use as checklist-value the id instead of the Object as say section on doc Array of objects (pick id)
<input type="checkbox" checklist-model="vendor.products" checklist-value="x._id">
Or if you need use the Object as selected products (checklist-value="x") you need use checklist-comparator because in your plunker the selected array and full product list don't have the same references. The comparator must match the equal objects by _id. Try this
<input type="checkbox" checklist-comparator="._id" checklist-model="vendor.products" checklist-value="prod" />
There is an option called ng-true-value="1". This will check with the values of the ng-model. It will work like if(ng-model(Name) == 1). Try this out.
<input type="checkbox" name="checkbox_demo_4" id="checkbox_demo_4"
ng-model="temp.taxable_type"
ng-true-value="1"
/>
In this, 1 is the true value that I stored in the DB. So it is checking automatically if the ng-model value contains 1.
All the best.
After reading carefully your question, and supossing that you want the same behaviour as the first smart table, the problem I think you had can be solved by
setting the product_title as the checklist-value of the input field, something like this :
<input type="checkbox" checklist-model="vendor.products" checklist-value="prod.product_title" />
Here the plunkr associated
http://plnkr.co/edit/5an1Fx?p=preview
Related
A table is to be created from taking values from json file where data should be displayed as radio buttons in columns(one value to be selected from each column). The selected values from each column should be displayed below the table. Could anyone please help me with this?
My Json is
"employees":[
{"firstName":"John", "lastName":"Doe" , "manager":"paul", "domain":"digital"},
{"firstName":"Anna", "lastName":"Smith", "manager":"Abraham","domain":"mechanics"},
{"firstName":"Peter", "lastName":"Jones", "manager":"Jonathan","domain":"physics"}
{"firstName":"Anna", "lastName":"carter", "manager":"Bravo","domain":"chemistry"}
{"firstName":"Watson", "lastName":"Daniel", "manager":"Pollock","domain":"biology"}
{"firstName":"James", "lastName":"Smith", "manager":"Tait","domain":"analogy"}
{"firstName":"Angel", "lastName":"Queen", "manager":"Mcgrath","domain":"mathematics"}
{"firstName":"Sana", "lastName":"Elizebeth", "manager":"Waugh", "domain":"english"}
]
Please note that you have to apply the returned value from inside the Observable. What you try is this in the end:
const employeesJSON = Observable<any>;
And then Angular tries to access the contained objects, which is not possible as an Observable<any> is not the same as an array of plain objects.
Try this solution instead:
protected employees: Array<Object>;
ngOnInit() {
this.http.get("api.myjson.com/bins/tshu8").pipe(map(res => {
if (res) {
this.employees = res.json();
}
}));
}
So here is my solution. Please note that this is only a suggestion:
We put 2 tables in the UI.
The first table is for input-purposes. Note the ngFor-loop in the tr of the table-body. Here you loop through your list of objects and with every new object a new tr gets created. Each tr contains 4 td's which contain input-elements of type "radio" and a span-element showing the content of the field. Controlled by the "name"-attribute each COLUMN builds a single unit. This means that a click on a radio button has only an effect on the state of every other radio button in the same column, not row! And each input-element's value gets set in order to provide it when the element is clicked.
The ngModel-attribute is the most important part of the story. Whenever you click a radio-button ngModel pushes the value of the clicked element into the connected variable. The second table then gets directly updated whenever ngModel updates one of the 4 variables (Interpolation). That's why a click on one radio button then prompts its value in the corresponding field of the "Output Table".
Hope this helps.
In your HTML-File:
<h1>Input Table</h1>
<div class="row" id="inputTableSector">
<table id="inputTable" class="table table-striped">
<thead>
<tr>
<td>first name</td>
<td>last name</td>
<td>manager</td>
<td>domain</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employees;">
<td><input type="radio" name="firstName" [value]="employee.firstName" [(ngModel)]="currentFirstName"><span>{{employee?.firstName}}</span></td>
<td><input type="radio" name="lastName" [value]="employee.lastName" [(ngModel)]="currentLastName"><span>{{employee?.lastName}}</span></td>
<td><input type="radio" name="manager" [value]="employee.manager" [(ngModel)]="currentManager"><span>{{employee?.manager}}</span></td>
<td><input type="radio" name="domain" [value]="employee.domain" [(ngModel)]="currentDomain"><span>{{employee?.domain}}</span></td>
</tr>
</tbody>
</table>
</div>
<hr>
<h1>Output Table</h1>
<div class="row" id="outputTableSector">
<table id="outputTable" class="table table-striped">
<thead>
<tr>
<td>first name</td>
<td>last name</td>
<td>manager</td>
<td>domain</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{currentFirstName}}</td>
<td>{{currentLastName}}</td>
<td>{{currentManager}}</td>
<td>{{currentDomain}}</td>
</tr>
</tbody>
</table>
</div>
In your TypeScript-File:
protected employees: Array<Object>;
protected currentLastName: string;
protected currentFirstName: string;
protected currentManager: string;
protected currentDomain: string;
ngOnInit(): void {
const employeesJSON = '[' +
'{"firstName":"John","lastName":"Doe","manager":"paul","domain":"digital"},' +
'{"firstName":"Anna","lastName":"Smith","manager":"Abraham","domain":"mechanics"},' +
'{"firstName":"Peter","lastName":"Jones","manager":"Jonathan","domain":"physics"},' +
'{"firstName":"Anna","lastName":"carter","manager":"Bravo","domain":"chemistry"},' +
'{"firstName":"Watson","lastName":"Daniel","manager":"Pollock","domain":"biology"},' +
'{"firstName":"James","lastName":"Smith","manager":"Tait","domain":"analogy"},' +
'{"firstName":"Angel","lastName":"Queen","manager":"Mcgrath","domain":"mathematics"},' +
'{"firstName":"Sana","lastName":"Elizebeth","manager":"Waugh","domain":"english"}' +
']';
this.employees = JSON.parse(employeesJSON);
}
I have a DataTable in my .NET Core application which has a checkbox column. I would like to be able to sort/order the table by checkbox value using the arrow buttons in the table header. In order to achieve this I have used the code from the DataTables Live DOM Ordering example here: https://datatables.net/examples/plug-ins/dom_sort.html
However, the column re-ordering does not work. If I inspect the elements I can see that there is something happening to the elements as they flash, however the order of the rows is not changing.
Here is the HTML:
<table id="airportsTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>IsoCode</th>
<th>Name</th>
<th>TimezoneName</th>
<th>TimezoneStandardName</th>
<th>
Required
<input type="checkbox" id="selectAllCheckbox" value="false" />
</th>
</tr>
</thead>
<tbody>
#{ foreach (var airport in airportList) //Index , update after iteration, so that non-model data can be attached
{
string iso = airportList[tableIndex].IsoCode;
<tr>
<td>
<label id="isoCode">#airportList[tableIndex].IsoCode</label>
</td>
<td>
<label id="name">#airportList[tableIndex].Name</label>
</td>
<td>
<label id="timeZoneName">#airportList[tableIndex].TimeZoneName</label>
</td>
<td>
<label id ="timeZoneStandardName">#airportList[tableIndex].TimeZoneStandardName</label>
</td>
<td>
<input type="checkbox" asp-for="#airportList[tableIndex].Required" id="requiredCheckbox" onclick="requiredChanged(this, '#airportList[tableIndex].IsoCode' )" />
</td>
</tr>
tableIndex++;
}
}
</tbody>
</table>
And here is the JQuery:
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
$(document).ready(function () {
var airportsTable = $('#airportsTable').DataTable({
"pageLength": 50,
"columns": [
null,
null,
null,
null,
{ "orderDataType": "dom-checkbox" }
]
});
Any help would be greatly appreciated, TIA!
Add this to your table after your columns section:
"columnDefs": [
{ "orderDataType": "dom-checkbox", targets: 5 }
]
https://datatables.net/reference/option/columns.orderDataType
I am new to angularjs. I have a Rest service which sends the below data of saleItems on get request.
saleItems = [
{
"id": 236,
"variant": "Oval Holder",
"mrp": "66.00"
},
{
"id": 237,
"variant": "Angle Holder",
"mrp": "52.00"
}
]
And my template looks like:
<table>
<tr><th>Sale Invoice</th></tr>
<tr>
<th>No.</th>
<th>Item.</th>
<th>Quantity</th>
<th>Rate</th>
<th>Discount</th>
<th>Discount Amount</th>
<th>Total Amount</th>
</tr>
<tr ng-repeat="item in $ctrl.saleItems | filter:$ctrl.query | orderBy:$ctrl.orderProp">
<td>{{$index + 1}}</a></td>
<td>{{item.variant}}</td>
<td><input type="text" value="{{item.sale_quantity}}"></td>
<td class='amt'>{{item.mrp | currency : "₹" : 2}}</td>
<td class='amt'><input type="text" placeholder="0.00" value="{{item.discount_percent}}"></td>
<td class='amt' >{{item.total_amount | currency : "₹" : 2}}</td>
</tr>
<tr><td>{{sale_total_amount}}</td></tr>
</table>
As you can see from the above template, I would like to have an input for item.sale_quantity, item.discount_percent and a readonly field item.total_amount.
Whenever the item.sale_quantity is updated, then the item.total_amount field should also be updated, along with sale_total_amount(sum of all item.total_amount's for each row).
Moreover I would like to do some validation in the controller against item.sale_quantity.
Just looking for some insights. Noob here.
Use ng-change. ng-change ="expression" evaluates the expression whenever there is change in value of data where ng-change is used.
So first initialise the item.total_amount and item.sale_quantity by adding
ng-init="item.total_amount=0;item.sale_quantity =0" in first <td> tag
and then replace
<td><input type="text" value="{{item.sale_quantity}}"></td> with
<td><input type="text" value="{{item.sale_quantity}}" ng-chnage="item.total_amount = item.sale_quantity * item.mrp"></td>
.
So now whenever there is change in item.sale_quantity expression item.total_amount = item.sale_quantity * item.mrp will be evaluated and newly calculated value will be assigned in item.total_amount.
I need one help i need to display data inside table using Angular.js.I am explaining my code below.
$scope.listOfData=[
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
my html table is given below.
<div class="table-responsive dashboard-demo-table">
<table class="table table-bordered table-striped table-hover" id="dataTable" >
<tbody>
<tr>
<td rowspan="2">Date</td>
<td rowspan="2">Name</td>
<td rowspan="2">Email</td>
<td colspan="7">Order</td>
</tr>
<tr>
<td>Order Id</td>
<td>Order status</td>
</tr>
<tr>
<td>date</td>
<td>name</td>
<td>email</td>
<td>orderid</td>
<td>orderstatus</td>
</tr>
</tbody>
</table>
</div>
expected output result.
date name email order
order_id order_status
2016-01-25 raj raj#gmail.com 1111 1
to 2016-02-04 2222 0
The above table is for serial no-1 again for sl no-2 the data will display accordingly.
Here i need suppose 0th index of $scope.listOfData has two set of data some field value like name,email are same so these two sate of data will join and it will display in 1st index of the table.Here date column will contain lower date to higher date like(from date to todate),name and email filed will contain the value one but here different is for order column order_id and order_status is different for each set of data of 0th index from $scope.listOfData so these will again move in a another loop.Please help me.
The following may help you
<div ng-repeat="data in listOfData">
<!--<Do whatever you need here with data.name, data.date etc...>-->
<!--You can keep your table here.-->
</div>
<tr ng-repeat="data in listOfData">
<td>{{data.date}}</td><td>{{data.name}}</td>....
</tr>
PS for header you can use a <thead> tag
Edit :
{
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
}
You can't with your json format like this, flatten it in a one level array with even index containing "from" and odd containing "to" datas then do the following
<tr ng-repeat="data in listOfData">
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
...
</tr>
EDIT : can't really make a plunker, here is what by flatten I mean transform this
$scope.listOfData=[
[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222}
},
{
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
]
]
Into this :
$scope.listOfData=[
{'date':'2016-01-25 18:14:00','name':'raj','email':'raj#gmail.com','order_status':1,'order_id':1111},
{'date':'2016-02-04 11:26:05','name':'raj','email':'raj#gmail.com','order_status':0,'order_id':2222},
{'date':'2016-01-23 13:15:59','name':'rahul','email':'rahul#gmail.com','order_status':1,'order_id':3333},
{'date':'2016-01-25 18:14:00','name':'rahul','email':'rahul#gmail.com','order_status':0,'order_id':4444}
}
]
So your "from" lines will have even index (0,2,4...) and your "to" lines will have the odds ones (1,3,5,...).
Using $index you can now built properly your lines : $index is given by ng-repeat. ng-if is a directive that won't build the dom element if the condition is not true.
So this
<td ng-if="$index %2==0">{{data.date}}</td>
<td ng-if="$index %2==1">To {{data.date}}</td>
Will always build only one <td> element.
I have a json file, that will eventually be called from a server with an API. Currently am just calling from an object.
I am creating an HTML file with a table navigation, where each header element also has a search box and submit button.
I would like the table to be blank on start, and when one of the header values is searched (id, nickname, email, etc), the json value that contains at least part of that search will populate the table.
I am new to the Angular syntax and am trying to get an idea of how this would even work.
(function() {
var app = angular.module('tool', []);
app.controller('searchController', function() {
this.info = data.people;
this.findId = function(idInput) {
angular.forEach(that.id, function(value, key) {
if (value.contains(idInput)) {
// not sure what to put here.
}
});
};
});
var data = {
"people": [{
"id": "2245231",
"nickname": "heyyman",
"email": "info#gmail.net",
"lastIp": "127.0.0.1",
"regIp": "127.0.0.1",
}, {
"id": "2245232",
"nickname": "heyyman2",
"email": "info2#gmail.net",
"lastIp": "127.0.0.2",
"regIp": "127.0.0.2",
}
};
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main>
<table ng-controller="searchController as search">
<thead>
<tr id="tableNavigation">
<td></td>
<td>ID
<input type="text" ng-model="idInput">
<input type="submit" ng-click="findId(idInput)">
</td>
<td>Nickname</td>
<td>Login / Email</td>
<td>Last IP</td>
<td>Registration IP</td>
</tr>
</thead>
<tbody id="tableCanvas">
<tr ng-repeat="people in search.info" ng-class-even="'even'">
<td></td>
<td>{{people.id}}</td>
<td>{{people.nickname}}</td>
<td>{{people.email}}</td>
<td>{{people.lastIp}}</td>
<td>{{people.regIp}}</td>
</tr>
</tbody>
</table>
</main>
So far, this is what I've done. Also, I've linked a JSFiddle.
http://jsfiddle.net/ho00cLkk/
Please let me know if what I am asking is confusing or not clear.
It seems to me that your question consists of two separate parts:
How do I filter the displayed items?
How do I hide all results until the first search is made?
As the second question seems uninteresting to me (many possible solutions, no general problem), I'll focus on the first one. You might want to read the documentation: https://docs.angularjs.org/api/ng/filter/filter . Then it's pretty simple and you don't even need any submit buttons:
<table>
<thead>
<tr>
<th>
Name
<input type="text" ng-model="searchProps.name">
</th>
...
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people | filter:searchProps">
...
</tr>
</tbody>
</table>
(where people is your search.info). Table rows will be automatically filtered to contain only the items with properties partially matching the values in searchProps.
CodePen example: http://codepen.io/anon/pen/jEEZaa