更新与angularjs中单击次数有关的视图
更新与angularjs中单击次数有关的视图
提问于 2018-04-16 19:20:17
我想更新我的视图(输入表单)以将产品添加到数据库中。对于单个产品，我可以通过将其添加到数组中来添加它，但现在我想添加多个产品，单击“添加更多的产品”按钮，就可以在现有表单下面生成类似的视图(表单)，这可以多次进行(在运行时确定)。现在我有两个问题: 1。如何更新我的视图与每一个(添加更多的产品)按钮点击。它是通过维护某些计数来完成的吗? 2.如何将每个窗体的多个产品值添加到对象数组中。
$scope.onClick = function () {
$scope.productData =
{
name: $scope.name,
description: $scope.description,
price: $scope.price,
image: $scope.image,
tags: $scope.tags,
partner_id: $scope.partner_id,
};
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-16 21:25:18
示例代码
有很多方法可以做到这一点。我制作了这个示例柱塞，它显示了一个简单的选项:切换一个表单div，在表单中添加数据，然后将结果的form对象推到主产品数组中。
编辑：--我重构了我的plunk和代码片段，以使用Javascript类和构造函数。如下所示，克隆主对象是执行此任务的另一种方法。
https://embed.plnkr.co/IsNifSaF8jE7oOog29dK/
(请参阅答案底部的完整片段。)
解释
在代码中，对所有对象属性都使用$scope。实际上，您应该创建一个顶级范围数组，它是从服务器检索产品的结果。实际上，我将创建一个与数据库中需要的产品对象相匹配的JavaScript构造函数/类(为了简洁起见，我刚刚创建了一个“主”对象和一个克隆的"newProduct“对象来编辑)：
// Sample Product Object
$scope.newProduct= {
name: "",
description: "",
price: 0.00,
image: "",
tags: [],
partner_id: 0
};可以使用$scope.newProduct将您的ng-model对象绑定到表单。
<!-- ==== Simplified Form ==== -->
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<input type="submit" class="btn btn-info" />
</form>现在，当您提交新产品数据时，您可以在控制器中操作它(通过$scope.submitNewProduct()函数)。一旦成功地将对象插入到数据库中，并且完成了对数据的操作，就可以将最终确定的“新产品”对象推到products数组中。当您将新产品添加到数组中时，AngularJs将为您更新视图(通过ng模型绑定对象正在监视更改)：
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);如果您没有使用构造函数，请注意，我将$scope.newProduct对象重置为默认值，这样当您再次打开新产品表单时，它不会进行任何新的更改。
// Reset placeholder product
$scope.newProduct = $scope.masterProduct;有用资源
- 教程Vids：https://youtu.be/MzqkIZLkBsU
- Javascript：constructors.asp
- ngRepeat示例：ng-repeat.asp
片段
(function() {
"use strict";
var app = angular.module("myApp", []);
app.controller("myController", myController);
myController.$inject = ["$scope", "$timeout", "$filter"];
function myController($scope, $timeout, $filter) {
$scope.loading = false;
class Product {
constructor(_name, _description, _price) {
this.id = this.getNewId();
this.name = _name;
this.description = _description;
this.price = _price;
this.image = "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg";
this.tags = [];
this.partner_id = 0;
}
getNewId() {
var latestId = $scope.products[$scope.products.length - 1].id
return latestId + 1;
}
}
// Pretending we received these products received from the database...
$scope.products = [{
id: 0,
name: "product_1",
description: "product_1 description",
price: 52.23,
image: "https://raspberrypi.dk/wp-content/uploads/2014/07/raspberry-pi-model-b-plus1.png",
tags: [],
partner_id: 345214967
}, {
id: 1,
name: "product_2",
description: "product_2 description",
price: 46.23,
image: "https://modtronix.com.au/wp-content/uploads/enc-rpi3-official_bottom_ll-100x100.jpg",
tags: [],
partner_id: 514852924
}];
// Add new Products by using this base object
$scope.placeholderProduct = {
id: 0,
name: "",
description: "",
price: 0.00,
image: "https://www.thesweetexplosion.co.uk/wp-content/uploads/2013/06/product-placeholder.jpg",
tags: [],
partner_id: 0
};
$scope.createNewProduct = function(){
$scope.newProduct = new Product("", "", 0);
}
$scope.submitNewProduct = function() {
// DO SERVER UPDATING HERE
// Show loading
$scope.updating = true;
// Simulate server update
$timeout(function() {
// If server update is successful, add new product to products array
$scope.products.push($scope.newProduct);
// Reset submit button
$scope.updating = false;
// Reset placeholder product
$scope.newProduct = {};
// Hide products form
$scope.addProductForm = false;
}, 1000);
}
}
})();.productImg {
width: 50px;
height: 50px;
}
.prodForm {
margin-top: 15px;
margin-bottom: 15px;
;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h3>AngularJS (1.3.1) - Instantiating Products with ES6 Class Constructor</h3>
</div>
</div>
</div>
<!-- New Product Form - Toggled with addProductForm -->
<div class="col-xs-12">
<button type="button" class="btn btn-sm btn-success" ng-click="createNewProduct(); addProductForm = !addProductForm" ng-show="!addProductForm">
<span class="glyphicon-plus"> Add New Product</span>
</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="addProductForm = !addProductForm" ng-show="addProductForm">
<span>Clear</span>
</button>
</div>
<div class="col-xs-12 well prodForm" ng-show="addProductForm">
<form class="form" ng-submit="submitNewProduct()">
<div class="form-group">
<label>Product Name: </label>
<input class="form-control" type="text" ng-model="newProduct.name" >
</div>
<div class="form-group">
<label>Description: </label>
<input class="form-control" type="text" ng-model="newProduct.description" />
</div>
<div class="form-group">
<label>Price: </label>
<input class="form-control" type="number" min="0.01" step="0.01" ng-model="newProduct.price" format="currency" />
</div>
<div class="form-group">
<label>Partner Id: </label>
<input class="form-control" type="number" ng-model="newProduct.partner_id" />
</div>
<input type="submit" class="btn btn-info" ng-show="!updating" />
<button type="button" class="btn btn-info" ng-show="updating"><i class="fa fa-spinner fa-spin"></i> Updating...</button>
</form>
</div>
<!-- Primary Products Table -->
<div class="col-xs-12">
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th>Image</th>
<th>Tags</th>
<th>Partner Id</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products track by $index">
<td>{{ product.name }}</td>
<td>{{ product.description }}</td>
<td>{{ product.price | currency }}</td>
<td>
<img class="productImg" ng-src="{{ product.image }}" alt="{{ product.name }} img" />
</td>
<td>{{ product.tags }}</td>
<td>{{ product.partner_id }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49864761
复制相关文章
相似问题
腾讯云开发者
