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，并将其传递给我的后端控制器，我的问题是将数据从我的后端控制器发送回我的表单，这基本上是另一种视图。我是我的用于从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允许您在后端绑定所需的数据，以便您可以在绑定后发送数据。

但我的方式不同。

将所有详细信息保存到浏览器的localStorage

我只完成了一些代码，你可以很容易地看到你应该在哪里做什么......

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

在上面......

GET request是在lcalhost：1337 /商店？id = 43（让商店ID为 43）。这是一个blueprint route（风帆默认为你制造它为了快速发展。）。
$scope.shop使用res.data进行初始化，并通过密钥 myShop 保存在浏览器localStorage中。您可以随时访问。（您可以在开发者控制台资源中查看本地存储）

所以你要做的就是加载编辑页面。

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

将localStorage中的数据放入当前$scope.shop ...

这就是我的方式！我希望它对你有用！

我想用我所选项目的数据填充我的编辑表单

1 个答案: