Düzenleme formumu seçili öğenin verileriyle doldurmak istiyorum

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> 

Yelkenler ve açılar konusunda yeniyim ve düzenleme formumu doldururken bir sorun yaşıyorum. Öğelerin bir listesi var, kod yukarıda. kullanıcı düzenleme bağlantısını tıklar ve bunları, seçilen öğenin verileriyle doldurulacak bir sayfanın altına koyar. Ben Seçili öğenin kimliği almak ve benim arka uç denetleyicisi durumuna geçmesine bilen

<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> 

, benim konu temelde başka görünümüdür hangi geri forma benim arka uç denetleyicisinden bu verileri gönderiyor .Below, url'den kimliği almak, ilgili verileri bulmak ve döndürmek için işlevimdir.

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) 
    }) 
    } 

Aşağıda i yönlendirme

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

ben bu durumla başa gitmek nasıl bilmek istiyorum

hallediyorum nasıl kodudur.

Answer 1

Tıklama senaryonuza göre düzenleme düzeniyle başka bir sayfa yüklemek istiyorsunuz. Ejs, arka uçta istediğiniz verileri bağlamanızı sağlar. Böylece, verileri bağlamadan sonra gönderebilirsiniz.

Ama bunu farklı şekilde yapıyorum.

TASARRUF Kuralların bazı kolayca nerede görebilir ve ne yapmalıyım sadece tamamlayorum tarayıcısı

ait localStorage Tüm Detay .....

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); 
      }); 
     } 
    }]); 

yukarıda

...

1. GET request lcalhost: 1337/shops? Id = 43 (Shop id 43 olsun) bir blueprint route (hızlı geliştirme için varsayılan olarak sizin için yaparlar) olduğunu.
2. $scope.shop, res.data ile başlatıldı ve aynı myShop anahtarıyla localStorage tarayıcılarına kaydedilir. Herhangi bir zaman erişebildiğiniz zaman. (Geliştirici konsolunda Yerel depolama alanını görebilirsiniz).

Yapmanız gereken tek şey düzenleme sayfasını yüklemektir.

<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> 

Arka uç Yükleme yönergesi. Düzenleme şablonunuzda

, ng-init="initializeForm()"'u üstten yapın. ve yazma denetleyicisi işlevi.

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

akım $scope.shop için localStorage veri koymak ...

Bu i yaparız! Ben sizin için çalışacaktır umut!