Develop Reference

AngularJS: nest directive in ng-repeat for using smart-table with dynamic table fields

I'm trying to use angular-smart-table for grid in my new AngularJS app. According to the document, to sort a column, I should use the st-sort directive like bellow:
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
However, I'm trying to re-use the piece of code for not only one table, so I don't know the table field names in advance until the run-time. I'm doing something like bellow:
<script type="text/ng-template" id="content1">
<div ng-repeat="table in $ctrl.tables">
<h2>{{table._tableName}}</h2>
<table st-table="table._data" class="table table-striped">
<tr>
<th ng-repeat="fieldName in table._fieldNames" st-sort="{{fieldName}}">{{fieldName}}</th>
</tr>
<tr ng-repeat="data in table._data">
<td ng-repeat="fieldName in table._fieldNames">{{$ctrl.formatCell(table, data, fieldName)}}</td>
</tr>
</table>
</div>
</script>
And this cannot work (cannot sort, other functions OK). I tried bellow it does not work, seems the st-sort has to be in the <th> tag.
<th ng-repeat="fieldName in table._fieldNames"><span st-sort="{{fieldName}}">{{fieldName}}</span></th>
And bellow does not work as well:
<tr>
<span ng-repeat="fieldName in table._fieldNames">
<th st-sort="{{fieldName}}">{{fieldName}}</th>
</span>
</tr>
Today I tried to develop a directive and use it in the comment by setting restrict to "M" to solve the above. Then I got a new problem: I'm using UI-Router in this app and I cannot get the table contents in my directive, because UI-Router states have isolated scopes and it only supports controllers but does not support directives. The author may think supporting directives is not necessary (yes in most cases, but this kind of assumptions are always dangerous).
I'm Trying two possible ways: 1., put the field names to the session/local storage for sharing as a work-around; 2., abandon UI-Router. Appreciate anyone providing a better solution.

Use custom component selector on <template> tag to avoid invalid HTML by template-tag

I have a child component that generates the rows of a table. Since Angular2 messes the output with the component-selector which would result in invalid html like <my-child-component> in a table row, I need to get rich of this. The solution in the other question is not suiteable cause I need to access the <tr> element in the child component.
My idea is to use <template> tag with the attribute of my child component:
#Component({
selector: '[childRow]',
template: `
<tr>
<td>Test</td>
</tr>
`
});
In master component
<table>
<thead>
<template childRow></template>
</thead>
</table>
Result in exception
Unhandled Promise rejection: Template parse errors: Components on an
embedded template: TimetableRowComponent
Its caused by the <template> tag. Using another element like <div childRow> works fine, like also the component selector <childRow> (in this case of course without sqare brackets in the selector of the child component).
How can I solve this? My goal is as I said to generate valid html. So I don't want to have <childRow>, <div> or any other elements in the output, that are not valid inside an HTML table. This seems to work using <template> like this example:
<template ngFor let-row [ngForOf]="myArray">
<tr>
{{row.memberA}}</td>
</tr>
</template>
But why can't I let Angular 2 render a child-template inside the <template> tag?

Finding an ng-repeat index?

I can do this in Angular.js:
<tr ng-repeat="cust in customers">
<td>
{{ cust.name }}
</td>
</tr>
Which would iterate through all the customers by putting each in a <tr> of its own.
But what if I wanted two customers in one <tr>? How would I accomplish that?
I normally do that by messing around with indexes and modulus values, but I'm not sure how to do that here.

It turns out this can be done without any custom filters or changing the format of your data, though it does require some extra markup. I thought this woudn't be possible at first as you can't use a span or anything similar within the table for your ng-repeat. This answer however, points out that you can use a tbody.
So it's just a case of using the ng-if directive (which renders html if the expression is true), the $index variable (provided by ng-repeat) and the $even variable (which is also provided by ng-repeat and is true when $index is even
I've created a demo in this Plunker
<div ng-controller="MainCtrl">
<table>
<tbody ng-repeat="cust in customers">
<tr ng-if="$even">
<td>{{customers[$index].text}}</td>
<td>{{customers[$index+1].text}}</td>
</tr>
</tbody>
</table>
</div>
This would of course only work if you have two columns, what if you have more? Well you can also put a full expression into ng-if rather than just a variable. So you can use modulus values like this:
<tbody ng-repeat="cust in customers">
<tr ng-if="($index % 3) == 0">
<td>{{customers[$index].text}}</td>
<td>{{customers[$index+1].text}}</td>
<td>{{customers[$index+2].text}}</td>
</tr>
</tbody>

ng-repeat PHP variables

I have a problem with ng-repeat and ng-init. It doens'nt show me the content nor the ID when i ask for them in my code (project.content). But it doesn't show the text itself either. So somewhere something is going wrong. Note that I use other open and close tags for angular as default.
Appareantly Angular sees something different in the code as the browser or I do, as I recieve this console error:
http://errors.angularjs.org/1.2.12/$parse/ueoe?p0=projects%20%3D%20%7B
<table ng-init="projects = {" id":"1","content":"testtesttest"}="" "="">
How can I get this to work?
HTML code:
<div ng-app="overviewApp">
<table ng-init="projects = <?=json_encode($projects)?> ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>
Looks like this when in browser source code:
<!-- BEGIN PAGE CONTENT-->
<div class="row">
<div class="col-md-12">
<div class="content-section">
<div ng-app="overviewApp">
<table ng-init="projects = {"id":1,"content":"TestTestTest"} ">
<tr ng-repeat="project in projects">
<td>[{[project.content]}]</td>
</tr>
</table>
</div>

It cannot parse it because it is seeing double quotes inside double quotes. Try using single quotes.
<table ng-init='projects = <?=json_encode($projects)?> '>
Also you must ensure that projects is in array format like so:
ng-init='projects = [{"id":1,"content":"TestTestTest"}]'
Finally, since you are using a custom interpolate providers {[{ and }]}, you must define that in your config:
app.config(['$interpolateProvider', function ($interpolateProvider) {
$interpolateProvider.startSymbol('[{[');
$interpolateProvider.endSymbol(']}]');
}]);
See it working: DEMO
Alternatively, instead of using interpolation markup, I would recommend using the ng-bind directive like so:
<td><span ng-bind="project.content"></span></td>
See a DEMO.
NOTE: The AngularJS documentation recommends using a controller over the ng-init directive to initialize values on a scope.

Sort or Rearrange Rows of a table in angularjs (drag and drop)

I wanted to have the functionality of rearranging rows in a table (sorting rows using drag and drop).
And the index of the row arrangement should also change in the model.
How can I do something similar to this : http://jsfiddle.net/tzYbU/1162/
using Angular Directive?
I am generating table as :
<table id="sort" class="table table-striped table-bordered">
<thead>
<tr>
<th class="header-color-green"></th>
<th ng-repeat="titles in Rules.Titles">{{titles.title}}</th>
</tr>
</thead>
<tbody ng-repeat="rule in Rules.data">
<tr>
<td class="center"><span>{{rule.ruleSeq}}</span></td>
<td ng-repeat="data in rule.ruleData">{{statusArr[data.value]}}</td>
</tr>
</tbody>
</table>

I did it. See my code below.
HTML
<div ng:controller="controller">
<table style="width:auto;" class="table table-bordered">
<thead>
<tr>
<th>Index</th>
<th>Count</th>
</tr>
</thead>
<tbody ui:sortable ng:model="list">
<tr ng:repeat="item in list" class="item" style="cursor: move;">
<td>{{$index}}</td>
<td>{{item}}</td>
</tr>
</tbody>{{list}}
<hr>
</div>
Directive (JS)
var myapp = angular.module('myapp', ['ui']);
myapp.controller('controller', function ($scope) {
$scope.list = ["one", "two", "thre", "four", "five", "six"];
});
angular.bootstrap(document, ['myapp']);

There is another library: RubaXa/Sortable: https://github.com/RubaXa/Sortable
It is for modern browsers and without jQuery dependency. Included is a angular directive. I'm going to check it out now.
You get good touch support additionally.

AngularJS was not really built for the manipulation of DOM elements, rather to extend the HTML of a page.
See this question and this Wikipedia entry.
For DOM manipulation, jQuery/mootools/etc will suite you just fine (hint: the example in your jsFiddle link).
You could probably use AngularJS to keep track of the ordering of your elements to update your model. I'm not sure how to do this using directives, but the following code may be useful
var MyController = function($scope, $http) {
$scope.rules = [...];
...
}
var updateRules = function(rule, position) {
//We need the scope
var scope = angular.element($(/*controller_element*/)).scope(); //controller_element would be the element with ng-controller='MyController'
//Update scope.rules
}
Then when you reorder the list, simply call updateRules() with the changed rule and its new position in the model.

Anyone else who wants something like this but not understanding the accepted answer. Here is a directive UI.Sortable for AngularJS that allows you to sort an array/ table rows with drag & drop.
Requirements
JQuery v3.1+ (for jQuery v1.x & v2.x use v0.14.x versions)
JQueryUI v1.12+
AngularJS v1.2+
Usage
Load the script file: sortable.js in your application: (you can find this sortable.js from here
<script type="text/javascript" src="modules/directives/sortable/src/sortable.js"></script>
make sure you have included JQuery, AngularJs and JQueryUI js files in
order before this sortable file
Add the sortable module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['ui.sortable'])
Apply the directive to your form elements:
<ul ui-sortable ng-model="items">
<li ng-repeat="item in items">{{ item }}</li>
</ul>
Developing Notes:
ng-model is required, so that the directive knows which model to update.
ui-sortable element should contain only one ng-repeat
Filters that manipulate the model (like filter, orderBy, limitTo,...) should be applied in the controller instead of the ng-repeat
3rd point is very Important as it took almost an hour to understand
why my sorting was not working?? It was because of orderBy in html
and that was resetting the sorting again.
For more understanding you can check the detail here.

If I understand you correctly, you want to be able to sort the rows? If so, use UI-Sortable: GitHub
Demo: codepen.io/thgreasi/pen/jlkhr

Along with RubaXa/Sortable there is one more angularjs library avilable that is angular-ui-tree. Along with drag and drop we can arrange elements in a tree structure and we can add and delete elements (nodes)
Please see the this link for examples
http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example .
Please see this for github
https://github.com/angular-ui-tree/angular-ui-tree.