send the data from a table to an input text with angularjs - angularjs

Question

I tried to get the value from a table to my input text,this is my try:
this is the first page that contains the list of clients:
clients.html
<div id="ng-app" ng-controller="PostController">
<table class="table table-striped table-bordered" style="text-align:center" id="table" > <!--onClick="select()"-->
<thead>
<th align="center">Référence</th><th align="center">Nom</th><th align="center">Prenom</th><th align="center">Email</th><th align="center">Adresse Facturation</th><th align="center" colspan="2">Actions</th>
</thead>
<tbody>
<tr ng-repeat="post in posts | filter:posts.nom" >
<td align="center">{{post.id}}</td>
<td align="center">{{post.nom}}</td>
<td align="center">{{post.prenom}}</td>
<td align="center">{{post.email}}</td>
<td align="center">{{post.adresse}}</td>
<td align="center"><a ui-sref="app.modifier({customerID:post.id})">Modify</a></td>
</tr>
</tbody>
</table>
</div>
this is the "PostController" in which I get the list of clients:
.controller('PostsCtrlAjax', ['$scope','$rootScope', '$http' , '$window' ,function($scope,$rootScope,$http,$window) {
$scope.errors = [];
$scope.msgs = [];
$rootScope.usersData ;
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app.php/apiclient/clients.json'})
.success(function(data){
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.posts = data; // response data
$rootScope.usersData = angular.toJson($scope.posts);
console.dir($rootScope.usersData);
}).error(function(data, status, headers, config) {
console.log("data error ...");
});}])
When I clic on "Modify" link I am redirected to modify.html which contains the table's data values in input text:
<tabset class="tab-container">
<tab ng-controller="editController" >
<div class="row">
<div class="form-group">
<label class="col-sm-1 control-label">Nom:</label>
<div class="col-sm-1">
<input type="text" class="form-control rounded" ng-model="usernom" id="nom" value="">
</div>
</div></div> </tab></tabset>
the "editController" is responsible for sending the modified data(in case I modify) from the text inputs to the database with rest web services:
.controller('editController', ['$scope','$rootScope', '$http',function($scope,$rootScope,$http) {{
$scope.errors = [];
$scope.msgs = [];
$scope.usershow = function() {
$scope.errors.splice(0, $scope.errors.length); // remove all error messages
$scope.msgs.splice(0, $scope.msgs.length);
$scope.path = window.location.href;
$scope.userid = $scope.path.split("/").pop();
$http({method: 'GET', url: 'http://localhost/onlinefacturation/web/app_dev.php/apiclient/modifier?id='+$scope.userid+'&nom='+$scope.usernom}).success(function(data, status, headers, config){
if (data.msg != '')
{
$scope.msgs.push(data.msg);
}
else
{
$scope.errors.push(data.error);
}
}).error(function(data, status) { // called asynchronously if an error occurs
$scope.errors.push(status);
});}}])
the routing file:
.state('app.modifier', {
url: '/client/modifier/:customerID',
templateUrl: 'tpl/modify.html',
controller: 'editController'
})
the problem is that when I clic on button Modify,I didn't get values in the input text (in the modify.html page),How can I send the data from a table or that I get from a web service to an input text in another web page??thanks for help

Answer 1

You share data between controller via angular service instance
First, Create a angular service to retrieve and hold common table data
angular.module('app').service('TableService', function() {
var tableData = {};
this.getTableData = function() {
// use $http.get to get data from server
// save data in service local var
}
this.getTableRow = function(id) {
// return record from tableData that matches this ID
}
}
Second, inject this service in your controllers to access the data
angular.module('app').controller('editController', function(TableSerivce, $routeParams) {
var editingTableRow = TableService.getTableRow($routeParams.customerId);
// get the data that you need to update and put into the input text elements or components in your modify html via scope vars here
}
PS: This is a psuedo code to give you a brief idea of it. Watch this Egghead video for more details