Hi
very new to Angularjs and would appreciate some help.
In the code below, part a) works fine and populates a table (table a) as required. Now, I want to be able to click on a line in the table and bring up a div containing a table with additional data in which is part b).
When I click a line, I get the div and table appearing, the variable passed, but the second table is not populated ..just printing thr AngularJS field names eg, {{ y.Charge }}.
Is anybody able to give me any pointers as I am stumped why the first works but the second does not?
note: both webpages return JSON in the correct format.
a)
//angularjs to fetch JSON data
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http:///test2.aspx")
.then(function (response) {$scope.recds = response.data.records;
})
b)
$scope.wkdata1=function(ac) {
document.getElementById("div1").style.visibility = 'visible';
app.controller('charges', function($scope, $http) {
$http.get("http:///Charges.aspx")
.then(function (response) {$scope.chgs = response.data.records2;
})
})
}
})
<body style="background-color: #F1FAFA">
<div ng-app="myApp" ng-controller="customersCtrl">
(a table)
<table id="Summary">
<tr>
<th class="auto-style6" style="width: 66px">Annual<br>Ranking<br><span class="auto-style7">(this week)</span></th>
<th>Account</th>
<th>Customer</th>
<th>Cust <br> Status</th>
<th>% of <br>Annual<br>Revenue</th>
<th>This week</th>
<th>week-1</th>
<th style="width: 71px">week-2</th>
<th>week-3</th>
<th> YTD <br>Revenue</th>
<th>Receipted<br>Loads</th>
<th>Receipted <br>Pallets</th>
<th>Delivery <br>Loads</th>
<th>Delivery<br>Pallets</th>
<th>Last<br>Agreed £</th>
</tr>
<tr ng-repeat="x in recds">
<td class="auto-style2" style="width: 66px" ng-click="wkdata1(x.Account)">{{ x.Position }}<span class="auto-style8"> ({{ x.WPosition }})</span></td>
<td id="act" class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Account }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Customer }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.CType }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Perc }}</td>
<td class="auto-style5" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.ThisWeek}} </span><img ng-src="{{(x.LastWeek - x.ThisWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.LastWeek }} </span><img ng-src="{{(x.Week2 - x.LastWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" style="width: 71px"><span class="auto-style4" ng-click="wkdata1(x.Account)">{{ x.Week2 }} </span><img ng-src="{{(x.Week3 - x.Week2) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Week3 }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.YTD }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recs }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recsplt }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.dels }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.delsplt }}</td>
<td id="preview" class="auto-style3">{{ x.preview }}</td>
</tr>
</table>
</div>
(b table)
<div id="div1" class="block2" ng-app="myApp" ng-controller="charges">
<table id="charge">
<tr>
<th>Account</th>
<th>Chargecode</th>
<th>Rate</th>
</tr>
<tr ng-repeat="y in chgs">
<td>{{ y.Customer }}</td>
<td>{{ y.ChargeCode }}</td>
<td>{{ y.Charge }}</td>
</tr>
</table>
</div>
Many Thanks
Rob
very new to Angularjs and would appreciate some help.
In the code below, part a) works fine and populates a table (table a) as required. Now, I want to be able to click on a line in the table and bring up a div containing a table with additional data in which is part b).
When I click a line, I get the div and table appearing, the variable passed, but the second table is not populated ..just printing thr AngularJS field names eg, {{ y.Charge }}.
Is anybody able to give me any pointers as I am stumped why the first works but the second does not?
note: both webpages return JSON in the correct format.
a)
//angularjs to fetch JSON data
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http:///test2.aspx")
.then(function (response) {$scope.recds = response.data.records;
})
b)
$scope.wkdata1=function(ac) {
document.getElementById("div1").style.visibility = 'visible';
app.controller('charges', function($scope, $http) {
$http.get("http:///Charges.aspx")
.then(function (response) {$scope.chgs = response.data.records2;
})
})
}
})
<body style="background-color: #F1FAFA">
<div ng-app="myApp" ng-controller="customersCtrl">
(a table)
<table id="Summary">
<tr>
<th class="auto-style6" style="width: 66px">Annual<br>Ranking<br><span class="auto-style7">(this week)</span></th>
<th>Account</th>
<th>Customer</th>
<th>Cust <br> Status</th>
<th>% of <br>Annual<br>Revenue</th>
<th>This week</th>
<th>week-1</th>
<th style="width: 71px">week-2</th>
<th>week-3</th>
<th> YTD <br>Revenue</th>
<th>Receipted<br>Loads</th>
<th>Receipted <br>Pallets</th>
<th>Delivery <br>Loads</th>
<th>Delivery<br>Pallets</th>
<th>Last<br>Agreed £</th>
</tr>
<tr ng-repeat="x in recds">
<td class="auto-style2" style="width: 66px" ng-click="wkdata1(x.Account)">{{ x.Position }}<span class="auto-style8"> ({{ x.WPosition }})</span></td>
<td id="act" class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Account }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.Customer }}</td>
<td class="auto-style2" ng-click="wkdata1(x.Account)">{{ x.CType }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Perc }}</td>
<td class="auto-style5" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.ThisWeek}} </span><img ng-src="{{(x.LastWeek - x.ThisWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" ng-click="wkdata1(x.Account)"><span class="auto-style4">{{ x.LastWeek }} </span><img ng-src="{{(x.Week2 - x.LastWeek) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style1" style="width: 71px"><span class="auto-style4" ng-click="wkdata1(x.Account)">{{ x.Week2 }} </span><img ng-src="{{(x.Week3 - x.Week2) < 0 && 'Images/green.png' || 'Images/red.png'}}" class="auto-style4" style="float: right"></td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.Week3 }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.YTD }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recs }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.recsplt }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.dels }}</td>
<td class="auto-style3" ng-click="wkdata1(x.Account)">{{ x.delsplt }}</td>
<td id="preview" class="auto-style3">{{ x.preview }}</td>
</tr>
</table>
</div>
(b table)
<div id="div1" class="block2" ng-app="myApp" ng-controller="charges">
<table id="charge">
<tr>
<th>Account</th>
<th>Chargecode</th>
<th>Rate</th>
</tr>
<tr ng-repeat="y in chgs">
<td>{{ y.Customer }}</td>
<td>{{ y.ChargeCode }}</td>
<td>{{ y.Charge }}</td>
</tr>
</table>
</div>
Many Thanks
Rob