AngularJS表單不填寫重定向

如何自動填寫AngularJS中的重定向編輯表單？以下是方案：AngularJS表單不填寫重定向

我有一個產品清單。當我點擊edit product時，我應該被重定向到編輯表單（通過使用AngularJS路由），並且包含2個字段名稱和說明的編輯表單應該被待編輯的數據自動填充。

我成功地重定向到編輯表單，但無法填寫原始數據。以下是我的代碼：

app.js

angular.module('productapp', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/productapp', {templateUrl: 'partials/productList.html'}). 
     when('/productapp/:productid', {templateUrl: 'partials/edit.html'}). 
     otherwise({redirectTo: '/productapp'}); 
}]);

edit.html

<div ng-controller="productsCtrl"> 
     <form method="POST" ng-controller="productsCtrl"> 
     <label>Add New Product:</label> 
      <input type="text" name="keywords" ng-model="rs.name" placeholder="enter name..." value="{{rs.name}}"> 
      <input type="text" name="desc" ng-model="rs.description" placeholder="enter description..." value="{{rs.description}}"> 
      <button type="submit" ng-click="save(rs.product_id)">Save</button> 
</form> 
</div>

products.js

function productsCtrl($scope, $http, $element) { 
     //~ $scope.url = 'php/search.php'; // The url of our search 
     // The function that will be executed on button click (ng-click="search()") 
     $http.get('php/products.php').success(function(data){ 
      alert("hi"); 
      $scope.products = data; 
     }); 
$scope.fetch = function(id) { 
     var elem = angular.element($element); 
     var dt = $(elem).serialize(); 
     //alert(id); 
     dt = dt+"&id="+id; 
     dt = dt+"&action=fetch"; 
     console.log($(elem).serialize()); 
     $http({ 
      method: 'POST', 
      url: 'php/products.php', 
      data: dt, 
      headers: {'Content-Type': 'application/x-www-form-urlencoded'} 
     }).success(function(data, status) { 
      //~ $scope.status = status; 
      //~ $scope.data = data; 
      $scope.rs = data; 
      console.log(data); // Show result from server in our <pre></pre> element 
     }).error(function(data, status) { 
      $scope.data = data || "Request failed"; 
      $scope.status = status; 
     }); 
    };

的index.html

<html ng-app = "productapp"> 
<head> 
<title>Search form with AngualrJS</title> 
     <script src="../angular-1.0.1.min.js"></script> 
     <script src="http://code.jquery.com/jquery.min.js"></script> 
     <script src="js/products.js"></script> 
     <script src="js/app.js"></script> 
</head> 
<body> 
    <div ng-view></div> 
</body> 
</html>

productslist.html

<div ng-controller="productsCtrl"> 
     <form method='POST' ng-controller="productsCtrl"> 
... 

    <td><a href='#/productapp/{{product.product_id}}' ng-click = "fetch(product.product_id)">edit</a></td>

我該怎麼辦呢？

來源

2012-09-19 z22

爲編輯頁面（EditCtrl）創建另一個控制器。從productslist.html代碼片段中移除fetch（） - 只需鏈接即可。然後，在您的EditCtrl中，執行獲取功能（即，不要將功能放入EditCtrl中的方法中）。

進樣$ routeParam到您的EditCtrl有機會獲得產品編號：

function EditCtrl($scope, $routeParams) { 
    alert($routeParams.productid); 
    // ... code here to fetch ...

來源

2012-09-19 20:03:57

我這樣做，但後來如何將鏈接知道它有指editCtrl？ – z22

當（'/ productapp /：productid'，{templateUrl：'partials/edit.html'，控制器：EditCtrl}）通過路由提供者處理時： –

AngularJS表單不填寫重定向

回答

相關問題