AngularJS - 订单表单：初学者指南

你好，未来的AngularJS大师们！今天，我们将踏上一段激动人心的旅程，探索AngularJS订单表单的世界。如果你之前从未写过一行代码，也不用担心——我们将从最基础的内容开始，逐步深入。在本教程结束时，你将能够像专业人士一样创建动态的订单表单！

AngularJS - Order Form

什么是AngularJS？

在我们深入研究订单表单之前，让我们先花点时间了解下AngularJS是什么。想象你正在建造一栋房子。HTML就像砖块和砂浆，CSS是油漆和装饰，那么AngularJS呢？它就像智能家居系统，让一切变得交互和动态。

AngularJS是一个JavaScript框架，它通过添加新的属性来扩展HTML，使其非常适合创建动态的Web应用。这就好像给你的静态HTML赋予了超能力！

设置我们的项目

首先，让我们来设置我们的项目。我们需要在我们的HTML文件中包含AngularJS库。下面是如何操作的：

<!DOCTYPE html>
<html ng-app="orderApp">
<head>
<title>我的AngularJS订单表单</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<!-- 我们的表单将放在这里 -->
<script src="app.js"></script>
</body>
</html>

在这段代码中，我们做了几件重要的事情：

我们在<html>标签中添加了ng-app="orderApp"。这告诉AngularJS这是我们的应用的根元素。
我们使用<script>标签包含了AngularJS库。
我们还包含了我们自己的JavaScript文件(app.js)，我们将在其中编写AngularJS代码。

创建AngularJS模块和控制器

现在，让我们创建app.js文件，并设置我们的AngularJS模块和控制器：

var app = angular.module('orderApp', []);

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};
});

这里发生了什么：

我们创建了一个名为'orderApp'的AngularJS模块。
我们定义了一个名为'OrderController'的控制器。
在控制器内部，我们在$scope上初始化了一个order对象。这个对象将持有我们的订单项和总计。

构建订单表单

现在，让我们在HTML中创建我们的订单表单：

<div ng-controller="OrderController">
<h2>下单</h2>
<form>
<label>物品名称: <input type="text" ng-model="newItem.name"></label><br>
<label>价格: $<input type="number" ng-model="newItem.price"></label><br>
<button ng-click="addItem()">添加物品</button>
</form>

<h3>订单摘要</h3>
<ul>
<li ng-repeat="item in order.items">
{{item.name}} - ${{item.price}}
<button ng-click="removeItem($index)">移除</button>
</li>
</ul>
<p>总计: ${{order.total}}</p>
</div>

让我们分解一下：

我们使用ng-controller将这个部分与我们的OrderController关联起来。
我们有输入字段用于物品名称和价格，使用ng-model将它们绑定到newItem.name和newItem.price。
我们有一个"添加物品"按钮，在点击时调用addItem()函数。
我们使用ng-repeat显示订单中的每一项。
每个物品都有一个"移除"按钮，用于调用removeItem()函数。
我们显示订单的总金额。

实现控制器逻辑

现在，让我们在控制器中添加必要的函数：

app.controller('OrderController', function($scope) {
$scope.order = {
items: [],
total: 0
};

$scope.newItem = {name: '', price: ''};

$scope.addItem = function() {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
};

$scope.removeItem = function(index) {
$scope.order.items.splice(index, 1);
$scope.calculateTotal();
};

$scope.calculateTotal = function() {
$scope.order.total = $scope.order.items.reduce(function(sum, item) {
return sum + item.price;
}, 0);
};
});

每个函数的作用如下：

addItem(): 向订单中添加一个新物品，计算新的总金额，并重置输入字段。
removeItem(): 从订单中移除一个物品，并重新计算总金额。
calculateTotal(): 计算订单中所有物品的价格总和。

提高用户体验

为了使我们的表单更加用户友好，让我们添加一些验证：

<form name="orderForm" ng-submit="addItem()" novalidate>
<label>物品名称: <input type="text" ng-model="newItem.name" required></label><br>
<label>价格: $<input type="number" ng-model="newItem.price" min="0" step="0.01" required></label><br>
<button type="submit" ng-disabled="orderForm.$invalid">添加物品</button>
</form>

并更新我们的控制器：

$scope.addItem = function() {
if ($scope.orderForm.$valid) {
$scope.order.items.push({
name: $scope.newItem.name,
price: parseFloat($scope.newItem.price)
});
$scope.calculateTotal();
$scope.newItem = {name: '', price: ''};
$scope.orderForm.$setPristine();
}
};

这些更改：

为确保所有字段都已填写且价格为一个正数，添加了表单验证。
当表单无效时禁用"添加物品"按钮。
只有当表单有效时才添加物品。
在添加物品后将表单重置为其原始状态。

结论

恭喜你！你刚刚构建了一个功能性的AngularJS订单表单。我们涵盖了AngularJS的基础知识，包括模块、控制器、双向数据绑定和表单验证。记住，熟能生巧，所以不要害怕对这个表单进行实验和扩展。也许可以添加一个折扣功能或者保存订单的能力？可能性无穷无尽！

下面是一个总结我们使用的主要AngularJS指令的表格：

指令	目的
ng-app	定义AngularJS应用的根元素
ng-controller	为应用的一部分指定一个控制器
ng-model	创建双向数据绑定
ng-click	指定在元素被点击时运行的函数
ng-repeat	为集合中的每个项目重复一个元素
ng-submit	指定在表单提交时运行的函数
ng-disabled	基于条件禁用一个元素

快乐编码，记住——每个专家都曾经是初学者。继续练习，你很快就会成为AngularJS的大师！

Credits: Image by storyset