I have a table
<table>
<thead>
<tr class="">
<th class="" ng-repeat="span in realm.spans">{{span.description}}</th>
</tr>
</thead>
<tbody>
<tr class="content-row" ng-repeat="row in realm.rows" ng-class="rowClass(row)" ng-click="markRow($event,row)">
<td class="content-field" ng-repeat="(i,field) in row.fields track by $index>
<input class="content-input" type="text" ng-model="row.fields[i]">
</td>
</tr>
</tbody>
</table>
How can i enforce the order used on thead, to be also used with the td elements in the table's body?
I have tried this:
<td ng-repeat="(i,field) in row.fields track by $index | orderBy: realm.spans>
<input type="text" ng-model="row.fields[i]">
</td>
But that made no change
Take a look at this sample demo
Working Demo
html
<div ng-app='myApp' ng-controller="ArrayController">
<table border="1">
<th ng-repeat="header in headers"> <b>{{ headers[$index]}}</b></th>
<tr ng-repeat="arr in records">
<td ng-repeat="val in arr" ng-bind-html-unsafe="arr[headers[$index]]">
</td>
</tr>
</table>
</div>
script
var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
$scope.headers = ['col1', 'col2'];
$scope.records = [{
col1: 'a1',
col2: 'd1'
}, {
col1: 'c2',
col2: 'A2'
}, {
col1: 'b3',
col2: 'c3'
}, {
col1: 'd4',
col2: 'a1'
}, {
col1: '11',
col2: '22'
}, {
col1: 'E1',
col2: 'E2'
}];
});
Related
I am new to AngularJS and i trouble to nested loop in tr.
Here is my Array :
Array
(
[1] => Array
(
[0] => Array
(
[detail-1] => 1
[detail-2] => 2
)
[1] => Array
(
[detail-3] => 3
[detail-4] => 4
)
)
[2] => Array
(
.....
)
)
Wanted output in AngularJS.
<tr>
<td>1</td>
</tr>
<tr>
<td>detail-1</td>
<td>detail-2</td>
</tr>
<tr>
<td>detail-3</td>
<td>detail-4</td>
</tr>
...........
So, how to fix this logically ?
Thanks in advance.
You could use a special repeat start and end markers, ng-repeat-start and ng-repeat-end to define range of DOM elements for topmost elements in the array:
angular
.module('demo', [])
.controller('DemoCtrl', function($scope) {
$scope.nestedArray = [
['foo', 'bar'],
['baz']
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<table>
<tbody>
<tr ng-repeat-start="item in nestedArray">
<td>
{{$index}}
</td>
</tr>
<tr ng-repeat-end>
<td ng-repeat="subitem in item">
{{subitem}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
Source
I have created JSON object like your array.
$scope.myArray = [
{
name: 'Array 1',
myArray: [
{name: '1'},
{name: '2'}
]
}, {
name: 'Array 2',
myArray: [
{name: '3'},
{name: '4'}
]
}
];
In Your HTML Code create table like below
<table class="table table-bordered">
<tr ng-repeat="row in myArray">
<td ng-repeat="childrow in row.myArray">
<span data-ng-bind="childrow.name"></span>
</td>
</tr>
</table>
Output looks like below
I've done some basic Angular filtering but i encountered a little problem, and I don't know how to solve it. I have a table with heading with input. I want each input to filter the table by that column. The problem is trying to dynamically set ng-model to a corresponding column name. I can hard code it, but I need it dynamically. Has anyone done something like that before?
EDIT: Is there any way to sign key from ng-repeat to search[key] or something because i know interpolation doesn't work inside ng-model
Here is the code:
<table class="table table-striped">
<thead>
<tr ng-repeat="item in vm.students | limitTo:1">
<th ng-repeat="(key, val) in item">
{{key | format}}
</th>
</tr>
<tr ng-repeat="item in vm.students | limitTo:1">
<th ng-repeat="(key, val) in item">
<input type="text" ng-model='search.key'>
</th>
<tr>
</thead>
<tbody>
<tr ng-repeat="item in vm.students | filter:search.key ">
<td> {{item.id}}</td>
<td> {{item.car}}</td>
<td> {{item.payment_method}}</td>
<td> {{item.currency}}</td>
<td> {{item.city}}</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
You can use Object.keys() method to populate an array of columns to generate your table and then use a search object for filtering, from the docs:
A pattern object can be used to filter specific properties on objects
contained by array. For example {name:"M", phone:"1"} predicate will
return an array of items which have property name containing "M" and
property phone containing "1".
Here is an example:
angular.module('app', [])
.controller('mainController', function mainController($scope) {
$scope.students = [
{ name: 'Aaron Judge', year: 'one', mark: 98 },
{ name: 'Ryan Zimmerman', year: 'two', mark: 76 },
{ name: 'Paul Goldschmidt', year: 'one', mark: 87 },
{ name: 'Mike Trout', year: 'two', mark: 89 },
{ name: 'Charlie Blackmon', year: 'one', mark: 77 },
{ name: 'Bryce Harper', year: 'three', mark: 67 },
{ name: 'Jose Altuve', year: 'two', mark: 83 },
];
$scope.columns = Object.keys($scope.students[0]);
$scope.search = {};
});
body { padding-top:50px; }
table input { color: black; }
<!-- CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<div class="alert alert-info">
<h2>Students ({{search}})</h2>
<table class="table table-bordered">
<thead>
<tr>
<th ng-repeat="column in columns track by column">{{ column }}</th>
</tr>
<tr>
<th ng-repeat="column in columns track by column">
<input type="text" ng-model="search[column]">
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="student in students | filter:search track by student.name">
<td ng-repeat="column in columns track by column">{{ student[column] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Simple example of sorting table as per column , this can be improved by using custom filters also , this is basic example
<html>
<head>
<title>Angular JS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("firstCtrl", function($scope) {
$scope.books = [{
name: "Angular",
authur: "James",
price: 500,
year: 2012
}, {
name: "Java",
authur: "Durga",
price: 700,
year: 2001
}, {
name: "HTML",
authur: "Rahul",
price: 1500,
year: 2011
}, {
name: "CSS",
authur: "Anand",
price: 2500,
year: 2002
}, {
name: "Node",
authur: "Rade",
price: 550,
year: 2015
}];
});
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstCtrl">
<table border="1">
<tr>
<th >Name</th>
<th>Authur</th>
<th >Price</th>
<th>Year</th>
</tr>
<tr>
<td>
<input type="text" ng-model="filterWithName" />
</td>
<td>
<input type="text" ng-model="filterWithAuthur"/>
</td>
<td>
<input type="text" ng-model="filterWithPrice" />
</td>
<td>
<input type="text" ng-model="filterWithYear" />
</td>
</tr>
<tr ng-repeat="book in books | filter:{name:filterWithName,authur:filterWithAuthur,price:filterWithPrice,year:filterWithYear}">
<td>{{book.name}}</td>
<td>{{book.authur}}</td>
<td>{{book.price}}</td>
<td>{{book.year}}</td>
</tr>
</table>
</div>
</div>
</body>
</html>
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'm trying to make an editable table directive. I have two configs:
1) Table config:
table = [
{name: 'id',title: '#'},
{name: 'name',title: 'Name'},
{name: 'phone',title: 'Phone'},
{
name: 'action',
title: 'Edit',
button_name: 'Edit me',
type: 'button',
}
];
2) Data config:
data = [
{id: 1, name: 'Rikki', phone: 02},
{id: 2, name: 'Pikki', phone: 03},
{id: 3, name: 'Mikki', phone: 03}
];
I'm wondering, how to put buttons in the cell when it's 'action' row:
3) HTML:
<thead>
<tr>
<h2>head</h2>
<td ng-repeat="(key, value) in table">{{value.title}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="(tkey, dataValue) in data">
<td ng-repeat="(dkey, value) in dataValue">
{{value}} // and if it's 'Action' column, I want to push data from Table config to show buttons
Is it possible? Who can help me?
<thead>
<tr>
<th ng-repeat="column in table">{{ column.title }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data">
<td ng-repeat="column in table">
<span ng-if="column.name !== 'action'">
{{ row[column.name] }}
</span>
<span ng-if="column.name === 'action'">
<button>{{ column.button_name }}</button>
</span>
</td>
</tr>
</tbody>
I want to add input text box to every column of table to make filtration on table based on respective column search.
Here is my HTML code for search row of table :
<tr>
<td ng-repeat="column in columns">
<div class="right-inner-addon">
<input type="text" class="form-control input-sm" ng-model="$parent.searchTableQuery.column.field">
</div>
</td>
</tr>
Here is my filter code :
<tbody>
<tr ng-repeat="item in dataSource | filter:searchTableQuery | orderBy:predicate:reverse">
<td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
</tr>
</tbody>
But here I am not able to filter table based on table column search.
I am not able to provide valid ng-model in search input box.
ng-model="$parent.searchTableQuery.$" is ng-model of table search input box.
Update
I have updated my issue at : http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA?p=preview
In this issue search is working only for Id column and it is not working for any other column.
Please see demo below
you can create generic filter header like below:
<tr>
<th ng-repeat="(key, value) in myArray[0]">
<input type="text" ng-model="search[key]" />
</th>
</tr>
angular.module('MyModule', [])
.controller('MyController', function($scope) {
$scope.search = {};
$scope.colors = [{
id: 11,
name: 'black',
shade: 'dark'
}, {
id: 22,
name: 'white',
shade: 'light'
}, {
id: 32,
name: 'red',
shade: 'dark'
}, {
id: 44,
name: 'blue',
shade: 'dark'
}, {
id: 5,
name: 'yellow',
shade: 'light'
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='MyModule' ng-controller="MyController">
<table border="1">
<thead>
<tr>
<th ng-repeat="(key, value) in colors[0]">
<input type="text" ng-model="search[key]" />
</th>
</tr>
</thead>
<tbody>
<tr>
<tr ng-repeat="c in colors | filter:search">
<td>{{c.id}}</td>
<td>{{c.name}}</td>
<td>{{c.shade}}</td>
</tr>
</tbody>
</table>
</div>
There was invalid key issue in my above code.
I have resolved my issue based on sylwester's code as follow :
<table border="1">
<thead>
<tr>
<th ng-repeat="key in getKeysOfCollection(colors[0])">{{key}}
<input type="text" ng-model="search[key]" />
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in colors | filter:search">
<td ng-repeat="key in getKeysOfCollection(item)">{{item[key]}}</td>
</tr>
</tbody>
</table>
$scope.search = {};
$scope.colors = [{
'id': 1,
'productId': 1001,
'productName': 'prd 1',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-01T06:41:30.809Z'
}, {
'id': 2,
'productId': 1002,
'productName': 'prd 2',
'minimumLevel': 23,
'price': 12.54,
'productDate': '2014-11-02T06:41:30.809Z'
}, {
'id': 3,
'productId': 1003,
'productName': 'prd 3',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-04T06:41:30.809Z'
}, {
'id': 4,
'productId': 1004,
'productName': 'prd 4',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-22T06:41:30.809Z'
}, {
'id': 5,
'productId': 1005,
'productName': 'prd 5',
'minimumLevel': 2,
'price': 12.50,
'productDate': '2014-11-18T06:41:30.809Z'
}];
$scope.getKeysOfCollection = function(obj) {
obj = angular.copy(obj);
if (!obj) {
return [];
}
return Object.keys(obj);
}
Now, I can filter table based on column search without specifying name of column in ng-repeat.
Working plunker is at http://plnkr.co/edit/5vjsRdRLTFgXhvqHVkWA