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>
Related
In this plunk I have an ngTable with pagination of 3 rows per page set with {count: 3} in NgTableParams. Instead, the table is displaying 4 rows per page. How to fix this?
HTML:
<table ng-table-dynamic="tableParams with cols" class="table table-bordered table-hover">
<thead>
<tr>
<th ng-repeat="col in cols" ng-style="{ 'color': col.color }">{{col.title}}</th>
</tr>
</thead>
<tr ng-repeat="row in data">
<td ng-repeat="col in cols" ng-style="{ 'color': col.color }" >{{row[col.nm]}}</td>
</tr>
</table>
Javascript:
var app = angular.module('app', ['ngTable']);
app.controller('myCtl', function($scope,NgTableParams) {
$scope.cols = [
{nm:'uid', title:'User ID', color: 'blue'},
{nm:'ugr', title: 'Group ID', color: 'red'}
];
$scope.data = [
{ uid: 'aaa',ugr: '222'},
{ uid: 'bbb', ugr: '111'},
{ uid: 'ccc',ugr: '222'},
{ uid: 'ddd', ugr: '111'}
];
$scope.tableParams = new NgTableParams({count: 3},
{dataset: $scope.data, counts: []});
});
you should change your code like this:
<tr ng-repeat="row in $data">
<td ng-repeat="col in cols" ng-style="{ 'color': col.color }" >{{row[col.nm]}}</td>
</tr>
$scope.tableParams = new NgTableParams({count: 3}, {data: $scope.data, counts: []});
The reason is:
1、about '$data', please see What is '$data' in ngtable's HTML page
2、about 'data' replace 'dataset', please see Angular ng-table not loading dataset?
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.
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>
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 am trying to create a nested grid in my ngtable like this:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td data-title="'kids'">
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="nesteduser in $nesteddata">
<td data-title="'Name'">{{nesteduser.name}}</td>
<td data-title="'Age'">{{nesteduser.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
question is: why is the nested data not displaying? here is a plunkr:
http://plnkr.co/edit/dKTtU89f7z6nQptgEZxN?p=preview
Got this working by adding the data to the $scope: (partial example code)
$scope.nesteddata = [{
name: "Kid Moroni",
age: 50
}, {
name: "Kid Tiancum",
age: 43
}, {
name: "Kid Jacob",
age: 27
}, {
name: "Kid Nephi",
age: 29
}, {
name: "Kid Enos",
age: 34
}];
And then, in the controller functions, refer to these $scope variables:
$scope.nestedtableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: $scope.nesteddata.length, // length of data
getData: function($defer, params) {
$defer.resolve($scope.nesteddata.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
Finally in the markup I left out the $ prefix, since this data is now in the scope:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
<td>
<table ng-table="nestedtableParams" class="table">
<tr ng-repeat="user in nesteddata">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
</td>
</tr>
</table>
Working Plunker (Although I doubt that it makes sense to nest grids like this)