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

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>

我是 sails 和 Angular 的新手，在填充编辑表单时遇到问题。我有一个项目列表，代码在上面。用户单击编辑链接，会将他们带到一个页面，代码如下，该页面将填充所选项目的数据。

<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，并将其传递给我的后端 Controller ，我的问题是将数据从我的后端 Controller 发送回我的表单，这基本上是另一个 View 。下面是我的函数从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可以让你在后端绑定(bind)你想要的数据，这样你就可以在绑定(bind)后发送数据。

但我用不同的方式。

SAVE All Detail to localStorage of the browser

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

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 请求 在 lcalhost:1337/shops?id=43 处发出(假设商店 id 为43).这是一个蓝图路线(sails默认为你制作它以实现快速发展)。
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);
      }
    }]);

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

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