Question

如何在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>

我该怎么做？

Answer 1

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

将$ routeParam注入EditCtrl以访问productID：

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

AngularJS表单未填写重定向

1 个答案: