Hello, need help and Angular inside widget please.
What I achieved so far:
I created widget that generates basic table from JSON data dynamically (number of data in array can change over time, therefore need it dynamically).
All OK so far.
What I need help with:
Clicking the “+” within the table have to call data from server stored either as data.sub1 or data.sub2 à depends from clicked + symbol id (e.g. from clicked <td id=” sub1”>……)
Can someone help?
PS: Due to amount of data in the final widget, I would like to do this onClick via “+” symbol.
Codes are attached including image.
/Petr
Widget HTML template:
<table class="table table-stripped">
<thead>
<tr style="white-space: nowrap">
<th ng-repeat="y in listHeaderData" scope="row">{{y.listHeader}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="x in data.main" id="{{x.description}}">
<td>{{x.description}}</td>
<td>{{x.count}}</td>
<td>{{x.action}}</td>
<td style="white-space: nowrap">{{x.action}}</td>
<td ng-if="x.expanded" ng-click="x.expanded = false">-</td>
<td id="{{x.attribute}}" ng-if="!x.expanded" ng-click="x.expanded = true; c.getSubData(x.attribute)">+</td>
<tr ng-if="x.expanded" ng-repeat-end>
<th >Number of TH elements to be created from JSON data dynamically</th>
<td >Number of TD elements below TH to be created from JSON data dynamically</td>
</tr>
</tbody>
</table>
Widget Client Script:
function($scope,$timeout,$rootScope,spUtil) {
/* widget controller */
var c = this;
/********************************************
Variables for the main list
********************************************/
$scope.listHeaderData = [
{listHeader:'Information Description'},
{listHeader:'Record count'},
{listHeader:'Action'}
];
c.getSubData = function(parm1) {
c.server.get().then(function() {
console.log("Sent param after click " + parm1 )
})
}}
Widget Server Code:
(function() {
data.main = [{"link":"123456","count":"2","description":"Description 1","action":"R","attribute":"sub1"},{"link":"789","count":"21","description":"Description 2","action":"N","attribute":"sub2"}]
data.sub1 = {"columns":["Name","Hover"],"rows":[["a1","a11"],["b1","b11"]]}
data.sub2 = {"columns":["Name","Hover"],"rows":[["a2","a22"],["b2","b22"]]}
})();
Was able to little progress.
Now know how to access current html element id. Take it into ng-click and get it back to view. Learned about "$event" into ng-click.
However my main problem still exists. I want only particular row to be updated clicking “+” symbol, but for some reason always all rows get updated with one value which is wrong, can anyone still support on this?
Updated codes below. I must be doing somethng wrong in HTML part I guess but cannot figure out what.
/Petr
Widget HTML:
<table class="table table-stripped">
<thead>
<tr style="white-space: nowrap">
<th ng-repeat="y in listHeaderData" scope="row">{{y.listHeader}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="x in data.main" id="{{x.description}}">
<td>{{x.description}}</td>
<td>{{x.count}}</td>
<td>{{x.action}}</td>
<td style="white-space: nowrap">{{x.action}}</td>
<td ng-if="x.expanded" ng-click="x.expanded = false">-</td>
<td id="{{x.attribute}}" ng-if="!x.expanded" ng-click="x.expanded = true; c.getSubData(x.attribute)">+</td>
<tr ng-if="x.expanded" ng-repeat-end>
<td>
{{te}}
</td>
</tr>
</tbody>
</table>
Widget client script:
function($scope,$timeout,$rootScope,spUtil) {
/* widget controller */
var c = this;
$scope.listHeaderData = [
{listHeader:'Information Description'},
{listHeader:'Record count'},
{listHeader:'Action'}
];
c.getSubData = function(parm1) {
$scope.te = event.target.id;
c.server.get(
{plusSymbolId:event.target.id}
).then(function(r) {
})
}
}
Widget server:
(function() {
data.main = [{"link":"123456","count":"2","description":"Description 1","action":"R","attribute":"sub1"},{"link":"789","count":"21","description":"Description 2","action":"N","attribute":"sub2"}]
data.sub1 = {"columns":["Name","Hover"],"rows":[["a1","a11"],["b1","b11"]]}
data.sub2 = {"columns":["Name","Hover"],"rows":[["a2","a22"],["b2","b22"]]}
})();
