私の編集フォームに選択したアイテムのデータを入力したい

Question

<div class="section" ng-app="ShopMod" ng-controller="myShopsCtrl"> 
    <a class="btn btn-primary btn-fill" href="/addshop">Add a new Shop</a> 
    <br> 
    <hr> 
    <div ng-init="getMyShops()"> 
    <div class="row"> 
     <div ng-repeat="shop in shops"> 
     <div class="col-md-6 col-lg-4 col-sm-12"> 
      <div class="card"> 
      <div class="front"> 
       <div class="cover"> 
       <img src="images/city.jpg" class="img-responsive"/> 
       </div> 
       <div class="user"> 
       <img class="img-circle img-responsive" src="images/default-avatar.png"/> 
       </div> 
       <div class="content"> 
       <div class="main"> 
        <h3 class="name">{{shop.owner}}</h3> 
        <h5><i class="fa fa-map-marker fa-fw text-muted"></i> {{shop.address}}, {{shop.state}}</h5> 
        <h5><i class="fa fa-building-o fa-fw text-muted"></i> {{shop.contact}}</h5> 
        <h5><i class="fa fa-envelope-o fa-fw text-muted"></i> {{shop.email}}</h5> 
       </div> 
       <div class="footer"> 
        <a href="/editshop/:{{shop.id}}"> 
        Edit | 
        </a> 
        <a ng-click="manageShop(shop.id)"> 
        Manage | 
        </a> 
        <a ng-click="editShop(shop.id)"> 
        Delete 
        </a> 
       </div> 
       </div> 
      </div> <!-- end front panel --> 
      </div> <!-- end card --> 
     </div> <!-- end card-container --> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

私はセールと角度が新しく、私の編集フォームに問題があります。私はアイテムのリストを持っています、コードは上記です。ユーザーは編集リンクをクリックしてページに移動します。コードはその下にあり、選択されたアイテムのデータが入力されます。

<div class="section" ng-app="ShopMod" ng-controller="editShopCtrl"> 
    <div class="header text-center"> 
    <h2 style="text-decoration: underline">Edit Shop</h2> 
    </div> 
    <div class="content"> 
    <form ng-submit="updateShop()"> 
     <div class="form-group"> 
     <label for="name">Shop Name</label> 
     <input type="text" class="form-control" ng-model="name" value="{{shop.name}}"> 
     </div> 
     <div class="form-group"> 
     <label for="address">Shop Address</label> 
     <input type="text" class="form-control" ng-model="address" value="{{shop.address}}"> 
     </div> 
     <div class="form-group col-md-6"> 
     <label for="contact">Phone Number</label> 
     <input type="tel" class="form-control" ng-model="contact" value="{{shop.contact}}"> 
     </div> 
     <div class="form-group col-md-6"> 
     <label for="email">Shop Email</label> 
     <input type="email" class="form-control" ng-model="email" value="{{shop.email}}"> 
     </div> 
     <div class="form-group col-md-6"> 
     <label for="email">State</label> 
     <select class="form-control" ng-model="state" value="{{shop.state}}"> 
      <option>Lagos</option> 
      <option>Abuja</option> 
     </select> 
     </div> 
     <div class="col-md-8"> 
     <button type="submit" class="btn btn-fill btn-info">Update Shop</button> 
     </div> 
    </form> 
    </div> 
</div> 

私は私の問題は基本的に別のビューである私のフォームに戻って私のバックエンド・コントローラーからそのデータを送信していますが、選択されたアイテムのIDを取得し、私のバックエンド・コントローラーにそれを渡す方法を知っています.Belowは、URLからIDを取得し、対応するデータを見つけて返す関数です。以下は

editShop:function (req, res) 
    { 
    var id = req.param('id'); 

    Shops.findOne({id:id}, 
    function (err, shop) 
    { 
     if(err) 
     { 
     return res.negotiate(err); 
     } 

     return res.send(shop.data) 
    }) 
    } 

私はこのような状況に対処については移動する方法を知っていただきたいと思いルーティング

'GET /editshop/:id':{ 
    view:'Shops/editShop', 
    locals: { 
     layout: '/Dashboard/layout-admin', 
    } 
    } 

を処理していますどのようにするためのコードです。

Answer 1

クリックしたシナリオに応じて、編集レイアウトで別のページを読み込みたいとします。 Ejsを使用すると、バックエンドで必要なデータをバインドし、バインド後にデータを送信できるようになります。

しかし私はそれとは違う方法です。私はあなたが簡単に.....どこで、あなたは何をすべき

angular.module('ShopMod', []) 
    .controller('myShopsCtrl', ['$scope', '$http', function ($scope, $http) { 
     $scope.getMyShops = function (id) { 
     $http.get('/shops?id=' + id) 
      .then(function (res) { 
       if (Array === res.data.constructor)//if res.data is array 
       $scope.shop = res.data[0]; 
       else //res.data is object. 
       $scope.shop = res.data; 
       localStorage.setItem('myShop', JSON.stringify($scope.shop)); 
      }, function (err) { 
       $scope.shop = {}; 
       console.log(err); 
      }); 
     } 
    }]); 

を見ることができ、あなたのコードの一部だけを完了していますブラウザののlocalStorageへ

SAVEすべての詳細

上記中...

1. GET requestはlcalhost：1337/stores？id = 43（ショップIDは 43）です。これはblueprint routeです（帆はデフォルトで になります）。
2. $scope.shopはres.dataで初期化され、ブラウザのlocalStorageにはmyShopという名前で保存されます。いつでもアクセスできます（デベロッパーコンソールのリソースでローカルストレージを見ることができます）。

あなたがしなければならないのは、編集ページをロードすることだけです。

<div class="footer"> 
    <a href="/editshop/"> 
     Edit | 
    </a> 
    <a ng-click="manageShop(shop.id)"> 
     Manage | 
    </a> 
    <a ng-click="editShop(shop.id)"> 
     Delete 
    </a> 
</div> 

編集テンプレートをロードするためのバックエンドルート。

'GET /editshop/':{ 
    view:'Shops/editShop', 
    locals: { 
     layout: '/Dashboard/layout-admin', 
    } 
    } 

編集テンプレートにあります。 をng-init="initializeForm()"にします。 およびライトコントローラ機能。

angular.module('ShopMod', []) 
    .controller('editShopCtrl', ['$scope', '$http', function ($scope, $http) { 
     $scope.getMyShops = function (id) { 
     $scope.shop=JSON.parse(localStorage.myShop); 
     } 
    }]); 

現在$scope.shopへのlocalStorageからデータを置く...

これは私が行う方法です！私はそれがあなたのために働くことを願っています！