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

i want to populate my edit form with the data of the selected item

本文关键字:填充 数据 我的 编辑 表单 项目 选项      更新时间:2023-09-26
<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',
    }
  }

我想知道如何处理这种情况。

根据您的方案,单击您希望加载另一个具有编辑布局的页面。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);
            });
      }
    }]);

在上面...

  1. GET request 在 lcalhost:1337/shops?id=43 制作(让商店 id 是43(.这是一个blueprint route(帆默认为你做用于快速开发(。
  2. $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);
      }
    }]);

将数据从本地存储到当前$scope.shop...

我就是这样做的!我希望它对你有用!