send the data from a table to an input text with 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

A Quickfix would be to save the data on the $rootScope, which is accessible from the 2 controllers. The more elegant way of communicating between contollers is via a service, as explained here. — Daniel
– Daniel, Commented May 22, 2015 at 6:57

kachhalimbu · Accepted Answer · 2015-05-22 07:04:44Z

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

answered May 22, 2015 at 7:04

kachhalimbu

2,20017 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kachhalimbu Over a year ago

did you use this approach? If so could you accept the answer as the correct one?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest