我想用所选项目的数据填充我的编辑表单
i want to populate my edit form with the data of the selected item
<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);
});
}
}]);
在上面...
-
GET request
在 lcalhost:1337/shops?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);
}
}]);
将数据从本地存储到当前$scope.shop
...
我就是这样做的!我希望它对你有用!
相关文章:
- 如何在Highchart中动态填充数据
- 使用jquery在选择框中的选项中填充数据
- 使用jquery、javascript重新填充数据
- 如何从 API 填充数据并加载到下拉列表中
- 通过遍历JSON文件来填充数据列表选项
- 在引导模式中,点击相应的datatables行中的按钮,填充数据
- 当选择District时,PHP将从数据库中填充数据
- 从角度工厂返回数据,返回对象后填充数据
- 高图表 - 从数组填充数据
- 在承诺函数从 pouchdb 填充数据之前触发 Ionic/Angular $watch的问题
- 无法用同位素填充数据
- 使用 php 发送 json 填充数据表
- JQuery - 在表单中填充数据的正确方法
- 翡翠选择字段填充数据
- C# MVC 填充数据表中的下拉列表组
- 自动填充数据被javascript的onchange事件覆盖
- 如何在html中只使用ng repeat来填充数据,而不使用repeat html's元素
- 用Firebase和Angular填充数据表
- 通过JS Ajax调用问题填充数据
- 使用两个ajax调用在两个html表中填充数据