Question

我试图从表中获取值到输入文本，这是我的尝试：这是包含客户列表的第一页：

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>

这是“PostController”，我在其中获取客户列表：

.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 ...");
  });}])

当我点击“修改”链接时，我被重定向到modify.html，其中包含输入文本中表格的数据值：

<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>

“editController”负责将修改后的数据（如果我修改）从文本输入发送到带有其他Web服务的数据库：

.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);
                    });}}])

路由文件：

.state('app.modifier', {
           url: '/client/modifier/:customerID',
           templateUrl: 'tpl/modify.html',
           controller: 'editController'
              })

问题是，当我点击按钮修改时，我没有在输入文本中获取值（在modify.html页面中），如何从表中发送数据或从Web服务获取数据到另一个网页的输入文本？感谢您的帮助

Answer 1

您可以通过角度服务实例

在控制器之间共享数据

首先，创建一个角度服务来检索和保存公共表数据

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
   }
}

其次，在您的控制器中注入此服务以访问数据

  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：这是一个伪代码，可以让您简单了解它。观看此Egghead video了解更多详情

使用angularjs

1 个答案: