Given this data:
this.stuff = [
[{title: 'col1', rowspan: 1},{title: 'col2', rowspan: 2}],
[{title: 'col3', rowspan: 1}]
];
How does one generate the following with ng-repeat:
<table border="1">
<tr>
<td rowspan="1">col1</td>
<td rowspan="2">col2</td>
</tr>
<tr>
<td rowspan="1">col3</td>
</tr>
</table>
You could use the following:
<table border="1">
<tr ng-repeat="item in stuff">
<td ng-repeat="obj in item" rowspan="{{ obj.rowspan }}">{{ obj.title }}</td>
</tr>
</table>
Related
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'text'}">{{$index}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}" filter-data="demo.countries">{{row.country}}</td>
</tr>
</table>
</div>
I have {{$index}} to print out the index number. I understand that i can filter easily using filter={age: 'number'} however i cannot do the same for $index as it is not part of the dataset from the JS.
I want to be able to filter $index via a input box instead of automatically filtering upon loading the page.
I don't think you can filter on $index. But you can simply extend you dataset before rendering the table.
Controller
$scope.data = [{
name: 'greg',
age:29,
money: 100.10
}, {
name: 'bob',
age:30,
money: 250.00
}];
for(var i = 0; i < $scope.data.length; i++) {
$scope.data[i].index = i;
}
$scope.table = new NgTableParams({ }, {
dataset: $scope.data
});
View:
<table ng-table="table" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Index'" filter="{index: 'number'}">{{row.index}}</td>
<td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
</tr> </table>
I have the following ngTable, and I want to add columns dynamically:
<table ng-table="tableParams" show-filter="showFilter" class="table table-bordered">
<tbody>
<tr ng-repeat="d in $data" >
<td ng-repeat="col in cols" title="'col.nm'"
filter="{ col.nm: 'text' }">{{ col.nm }}</td>
</tr>
</tbody>
</table>
$data contains the data itself, but I have the columns definition in a different array:
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
and $data:
$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...
When I run the code the table is empty without any columns. I tried to look online to see if this is possible but couldn't find an example. Any ideas?
Added PLUNK
Problem is with your ng-repeat. You are using Wrong variable syntax
Change this
<tr ng-repeat="d in $data" >
to
<tr ng-repeat="d in data" >
Lel... i check PLUNK and i see you no declare cols in SCOPE! and how u want take it from html?! xD check change this:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
$scope.data = [
{ col0: 'User 1', col1: 'Name 1', col2: 'Group 1'},
{ col0: 'User 2', col1: 'Name 2', col2: 'Group 2'}
];
$scope.tableParams = new NgTableParams({dataset: $scope.data});
});
And voila
EDIT V2:
Check this html, i added columns name with one ng-repeat and value in another.
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<td ng-repeat="col in cols">{{ col.nm }}</td>
<tr ng-repeat="u in data">
<td ng-repeat="(key, value) in u">
{{value}}
</td>
</tr>
</tbody>
</table>
Hope this help
Cols:
$scope.cols = [ {nm:'col0'}, {nm:'col1'}, {nm:'col2'} ];
Data:
$scope.data = [ {col0: "0", col1: "1", col2: "2"} ] ...
Template:
<div ng-controller="myCtl" ng-app="app">
<table ng-table="tableParams" class="table table-bordered table-hover">
<tbody>
<tr><td ng-repeat="name in names">{{ name.nm }}</td></tr>
<tr ng-repeat="u in data">
<td ng-repeat="value in u">
{{value}}
</td>
</tr>
</tbody>
</table>
</div>
Try this.
I am trying to found how i can have a table with nested table or second level data. With ng-repeat-start i create the desired ui result but i can't do sorting and filtering in nested data
html code is :
<table ng-table="list.tableParams"
class="table table-condensed table-bordered table-striped">
<tr ng-repeat-start="row in $data">
<td data-title="'Name'" sortable="'name'" filter="{name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="row.hideRows=!row.hideRows"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{ country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-hide="!row.hideRows" ng-repeat="sub in row.data">
<td style="padding-left: 50px" filter="{name: 'text'}">{{sub.name}}<br />
<td>{{sub.age}} members</td>
<td>{{sub.money}}</td>
<td>{{row.country}}</td>
</tr>
<tr ng-repeat-end></tr>
and my data and table params are :
vm.simpleList =[{"name":"Karen","age":45,"money":798,"country":"Czech Republic",
data:[{"name":"lala","age":59,"money":523,"country":"American Samoa"},
{"name":"aaa","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"}]},
{"name":"Cat","age":49,"money":749,"country":"Czech Republic"},
{"name":"Bismark","age":48,"money":672,"country":"Denmark"},
{"name":"Markus","age":41,"money":695,"country":"Costa Rica"},
{"name":"Anthony","age":45,"money":559,"country":"Japan"},
{"name":"Alex","age":55,"money":645,"country":"Czech Republic"},
{"name":"Stephane","age":57,"money":662,"country":"Japan"},
{"name":"Alex","age":59,"money":523,"country":"American Samoa"},
{"name":"Tony","age":56,"money":540,"country":"Canada"},
{"name":"Cat","age":57,"money":746,"country":"China"},
{"name":"Christian","age":59,"money":572,"country":"Canada"},
{"name":"Tony","age":60,"money":649,"country":"Japan"},
{"name":"Cat","age":47,"money":675,"country":"Denmark"},
{"name":"Stephane","age":50,"money":674,"country":"China"},
{"name":"Markus","age":40,"money":549,"country":"Portugal"},
{"name":"Anthony","age":53,"money":660,"country":"Bahamas"},
{"name":"Stephane","age":54,"money":549,"country":"China"},
{"name":"Karen","age":50,"money":611,"country":"American Samoa"},
{"name":"Therese","age":53,"money":754,"country":"China"},
{"name":"Bismark","age":49,"money":791,"country":"Canada"},
{"name":"Daraek","age":56,"money":640,"country":"Costa Rica"},
{"name":"Tony","age":43,"money":674,"country":"Canada"},
{"name":"Karen","age":47,"money":700,"country":"Portugal"},
{"name":"lala","age":0,"money":0,"country":null}];
vm.tableParams = new NgTableParams({
sorting: {name: "asc"},
count: 5
}, {
counts: [],
dataset: vm.simpleList
});
I can't found anywhere an example or a way to do that. If i have nested tables like this :
<table ng-table="list.tableParams">
<tr ng-repeat-start="row in $data">
<!-- td's -->
<td data-title="'Name'" sortable="'name'" filter="{name, data.name: 'text'}">
<span ng-if="row.data.length > 0" class="glyphicon"
ng-class="{ 'glyphicon-chevron-right': !row.hideRows, 'glyphicon-chevron-down': row.hideRows }"
ng-click="list.createNestedTable(row)"></span> {{row.name}}
</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
<td data-title="'Country'" filter="{country: 'select'}"
filter-data="list.countries">{{row.country}}</td>
</tr>
<tr ng-repeat-end ng-hide="!row.hideRows" >
<td>
<table ng-table="list.tableParams2">
<tr ng-repeat="sub in $data">
<td style="padding-left: 50px" filter="{name: 'text'}" sortable="'name'">{{sub.name}}<br />
<td filter="{age: 'number'}" sortable="'age'">{{sub.age}}</td>
<td filter="{money: 'number'}" sortable="'money'">{{sub.money}}</td>
<td filter="{country: 'select'}" sortable="'country'">{{row.country}}</td>
</tr>
</table>
</td>
</tr>
</table>
How can i make filtering in both columns name and data.name (nested data) from the common external filtering? Something like that : filter="{name, data.name: 'text'}"
I am brand new to AngularJS and I'm figuring this is pretty easy, but I can't find out how to do it by searching the web. I want to have a textbox, that a user can enter an order number into, and then bring up the data associated with that ordernumber. I have the following controller that has some dummy data in it.
(function () {
'use strict';
angular
.module('crm.ma')
.controller('LookUpCtrl', LookUpCtrl)
.filter('lookupFilter', function (){});
function LookUpCtrl($filter) {
var vm = this;
vm.results = [
{
accountId: 1,
accountName: 'some name',
address: '201 some st',
city: 'Columbus',
state: 'OH',
zip: 'zip',
phone: '899-629-7645',
parentName: 'Parent 1',
accountType: 'Type 1',
accountStatus: 'Status 1',
creditTerm: 'Term 1',
ordernumber: '34567'
},
{
accountId: 2,
accountName: 'house home',
address: '2963 this st',
city: 'Columbus',
state: 'OH',
zip: 'zip',
phone: '899-627-7592',
parentName: 'Parent 2',
accountType: 'Type 2',
accountStatus: 'Status 2',
creditTerm: 'Term 2',
ordernumber: '43228'
}
];
}
}());
Can anyone point me in the right direction?
SO you want to see what I've already got: Here is a table that I created that uses ng-repeat to display all records. I used a filter to be able to search the table and display records based on the search. With what I want to do now, I want to enter in a specific order# and bring up one result.
<div ng-controller="LookUpCtrl as vm">
<div>Lookup Results</div>
<div><input type="text" id="searchText" name="searchText" ng-model="query" /></div>
<table ng-if="query">
<thead>
<tr>
<th>Acc. ID</th>
<th>Acc. Name</th>
<th>Acc Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Phone</th>
<th>Parent Name</th>
<th>Account Type</th>
<th>Account Status</th>
<th>Credit Term</th>
</tr>
</thead>
<tbody>
<tr ng-show="results.length!=0" ng-repeat="result in vm.results | filter:query ">
<td data-th="Acc. ID">{{ result.accountId }}</td>
<td data-th="Acc. Name">{{ result.accountName }}</td>
<td data-th="Acc Address">{{ result.address }}</td>
<td data-th="City">{{ result.city }}</td>
<td data-th="State">{{ result.state }}</td>
<td data-th="Zip">{{ reuslt.zip }}</td>
<td data-th="Phone">{{ result.phone }}</td>
<td data-th="Parent Name">{{ result.parentName }}</td>
<td data-th="Account Type">{{ result.accountType }}</td>
<td data-th="Account Status">{{ result.accountStatus }}</td>
<td data-th="Credit Term">{{ result.creditTerm }}</td>
</tr>
<tr>
<td ng-show="results.length==0">
(0) Results found for AccountID {{ result.accountId }}, Order Number {{ result.ordernumber }}
</td>
</tr>
</tbody>
</table>
You are very close already. You just need to update the ng-model of the input to isolate the value you are wanting to filter by. In this case, the order number.
<input type="text" id="searchText" name="searchText" ng-model="query.ordernumber " />
I return an array of people from the database eg,
[
{
id: 1,
name: 'Jim',
address: "123 Test Street",
phone: "999999999"
},
{
id: 2,
name: 'Tom',
address: "123 Test Street",
phone: "888888888"
},
{
id: 3,
name: 'Harry',
address: "123 Test Street",
phone: "012345678"
}
]
my API allows me to select a partial person by setting the fields parameter
eg for this example,
&fields=id,name,address,phone
full url for this example,
?q=&fields=id,name,address,phone&id=1,2,3
I want to be able to dynamically generate a table based on the fields selected.
Something like this,
<table>
<thead>
<tr>
<th ng-repeat="field in fields">[[ field.text ]]</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in people">
<td ng-repeat="field in fields">[[ person.[[ field.id ]] ]]</td>
</tr>
</tbody>
</table>
How can I interpolate the field.id so i can use to it select the key in person.
Edit, I have changed the interpolation characters to [[ & ]].
This line
<td ng-repeat="field in fields">[[ person.[[ field.id ]] ]]</td>
should be
<td ng-repeat="field in fields">[[ person[field.id] ]]</td>
If working with newer versions of Angular, using curly brackets with the nested interpolation in square brackets will do the trick.
<table id="dynamicTable" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th *ngFor="let col of Columns">{{col.column_name}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of Table">
<td *ngFor="let col of Columns">{{row[[col.column_name]]}}</td>
</tr>
</tbody>
</table>