0

如何在AngularJS中的重定向上自动填写编辑表单？以下是场景：

我有一个产品清单。当我点击 时edit product，我应该被重定向到编辑表单（通过使用 AngularJS 路由），并且包含 2 个字段 - 名称和描述的编辑表单应该由要编辑的数据自动填充。

我成功重定向到编辑表单，但无法用原始数据填写表单。以下是我的代码：

应用程序.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'});
}]);

编辑.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>

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

索引.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>

产品列表.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>

我怎么做？

4

1 回答 1

1

为编辑页面创建另一个控制器 (EditCtrl)。从 productslist.html 片段中删除 fetch() —— 只需要链接。然后，在您的EditCtrl 中，执行获取功能（即，不要将该功能放入EditCtrl 中的方法中）。

将 $routeParam 注入您的 EditCtrl 以访问 productID：

function EditCtrl($scope, $routeParams) {
   alert($routeParams.productid);
   // ... code here to fetch ...
于 2012-09-19T20:03:57.270 回答