Now the Controller for loading and handling the sorting and querying looks as follows:
var CompaniesApp = angular.module('Companies', ['CompanyService','ContractService','BrowseService']); CompaniesApp.controller("CompaniesGridCtrl", function($http, $scope, $location, CompanySrv,BrowseSrv){ // Grid Controller uses CompanySrv as the service to get the data from, and BrowseSrv to manage the grid. $scope.companyData = CompanySrv.data; // Let scope data point to to service data $scope.Browse=BrowseSrv; $scope.SearchString=""; BrowseSrv.Init('/NewCompany','/EditCompany/','Name:',$scope.SearchString,CompanySrv.getCompanies,CompanySrv.deleteCompany); BrowseSrv.loaddata('Name'); // initial data load });
As you can see, I also pass the BrowseService as a dependency. I set the
$scope.Browse=BrowseSrv;
so I can call the service from my HTML
I my HTML I can then code the following referring to the service:
<div> <table id="box-table-a" style="width: 70%"> <thead> <tr> <th scope="col"></th> <th scope="col"><b>{{Browse.getsearchlabel()}}</b><input type="text" ng-model="SearchString" ng-change="Browse.refresh(SearchString)"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"></th> <th scope="col"><button id="newbutton" ng-click="Browse.GotoNew()"> Nieuw </button></th> </tr> </thead> <thead> <tr> <th scope="col"><a href="" ng-click="Browse.ChangeSortOrder('Company_id','Nr:')">Id</a></th> <th scope="col"><a href="" ng-click="Browse.ChangeSortOrder('name','Naam:')">Naam</a></th> <th scope="col"><a href="" ng-click="Browse.ChangeSortOrder('Contact_Name','Contact persoon:')">Contact persoon</a></th> <th scope="col"><a href="" ng-click="Browse.ChangeSortOrder('Contact_Tel','Contact Tel-Nr:')">Contact Tel-Nr</a></th> <th scope="col"><a href="" ng-click="Browse.ChangeSortOrder('Contact_Email','Contact E-mail:')">Contact E-mail</a></th> <th scope="col"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr ng-repeat="Company in companyData.companies"> <td>{{Company.Company_Id}}</td> <td>{{Company.Name}}</td> <td>{{Company.Contact_Name}}</td> <td>{{Company.Contact_Tel}}</td> <td>{{Company.Contact_Email}}</td> <td> <button id="editbutton" ng-click="Browse.Edit(Company.Company_Id)">wijzig</button> </td> <td> <button id="deletebutton" ng-click="Browse.deleterow(Company.Company_Id)">verwijder</button> </td> </tr> </tbody> <tfoot id="tf"> <tr> <td></td> <td><a href="" ng-click="Browse.Previous()">Vorige</a> <a href="" ng-click="Browse.Next()">Volgende</a></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tfoot> </table> </div>
You have to love Angular !
No comments:
Post a Comment