jeudi 21 mai 2015

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

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




Aucun commentaire:

Enregistrer un commentaire