I'm trying to get multiple tabulated results on a single page through the
use of multiple controllers and callbacks. I'm doing something wrong. Any
help is appreciated.
The two search URL's return JSON arrays with values as per the templates.
The configuration script can be output independently of the rest e.g.
optionally from pages and would be the trigger to establish the
controlllers. The ng-app directive is on the document body.
<script>
//debugger;
//var searchConfigurations = [{ searchUrl: '/Home/Search', view:
'Home Index', criteria: { Page: 1, ItemsPerPage: 10 }, controllerName:
'Search' }];
var searchConfigurations = [{ searchUrl: '/Home/Search', view:
'Home Index', criteria: { Page: 1, ItemsPerPage: 10 }, controllerName:
'Search' },
{ searchUrl: '/Home/SearchPeople',
view: 'Home Index', criteria: { Page: 1, ItemsPerPage: 10 },
controllerName: 'People' }];
</script>
<script>
(function () {
if (searchConfigurations) {
// One time
var localAppModule = angular.module('localApp', []);
// create client controllers [0..n]
for (var i = 0; i < searchConfigurations.length; i++) {
var searchConfiguration = searchConfigurations[i];
if (!searchConfiguration.searchUrl) {
throw 'searchConfiguration.searchUrl not set';
};
var controllerName = searchConfiguration.controllerName
|| 'Search'
localAppModule.controller(controllerName +
'Controller', function ($scope, $http, $window) {
var collectionName =
searchConfiguration.controllerName || 'Items';
debugger;
angular.element(document).ready(function () {
$scope.refresh();
});
$scope.refresh = function () {
debugger;
$scope.working = true;
$http({ method: 'GET', url:
searchConfiguration.searchUrl }).
success(function (data, status, headers,
config) {
// this callback will be called
asynchronously
// when the response is available
debugger;
$scope.items = data; // $scope is not
scoped to controller e.g. shared scope variable across controllers?
$scope.working = false;
}).
error(function (data, status, headers, config) {
// called asynchronously if an error occurs
// or server returns response with an error
status.
debugger;
var sourceView = searchConfiguration.view
|| 'VIEW NOT SET';
console.log('ERROR (Search): ' + sourceView
+ ': ' + status)
$scope.working = false;
});
};
});
};
};
}());
</script>
<div class="panel panel-info">
<!-- The first result set (default controller name) -->
<div class="panel-body" data-ng-controller="SearchController">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Day</th>
</tr>
</thead>
<tbody>
<!-- Items Template -->
<tr data-ng-repeat="item in items">
<td>{{item.ID}}<a href="#">View</a></td>
<td>{{item.Day}}</td>
</tr>
</tbody>
</table>
</div>
<!-- The second result set -->
<div class="panel-body" data-ng-controller="PeopleController">
<table class="table table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Birthday</th>
</tr>
</thead>
<tbody>
<!-- Items Template -->
<tr data-ng-repeat="item in items">
<td><a href="#{{item.ID}}">View</a></td>
<td>{{item.Name}}</td>
<td>{{item.BirthDay}}</td>
</tr>
</tbody>
</table>
</div>
</div>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
