0

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>

それ、どうやったら出来るの？

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 に答える