应用程序

应用程序说明

第 1 步：开始

首先创建一个名为 myShoppingList 的应用程序，并向其中添加一个名为 myCtrl 的控制器。

控制器将名为 products 的数组添加到当前的 $scope 中。

在 HTML 中，我们使用 ng-repeat 指令来显示使用数组中的项目的列表。

实例

到目前为止，我们已经根据数组的项目创建了一个 HTML 列表：

  

    
{{x}}
  

点击 "运行实例" 按钮查看在线实例

第 2 步：添加商品

在 HTML 中，添加一个文本字段，并使用 ng-model 指令将其绑定到应用程序。

在控制器中，创建一个名为 addItem 的函数，并使用 addMe 输入字段的值将商品添加到 products 数组中。

添加一个按钮，并为其指定一个 ng-click 指令，该指令将在单击该按钮时运行 addItem 函数。

实例

现在我们可以将商品添加到购物清单中：

  

    
{{x}}
  
  
  添加

点击 "运行实例" 按钮查看在线实例

第 3 步：删除商品

我们还希望能够从购物清单中删除商品。

在控制器中，创建一个名为 removeItem 的函数，该函数将您想要删除的项目的索引作为参数。

在 HTML 中，为每个项目创建一个 元素，并为其提供一个 ng-click 指令，该指令使用当前 $index 调用 removeItem 函数。

实例

现在我们可以从购物清单中删除商品：

  

    

      {{x}}×
    
  
  
  添加

点击 "运行实例" 按钮查看在线实例

第 4 步：错误处理

该应用有一些错误，例如，如果您尝试两次添加相同的商品，该应用就会崩溃。另外，也不应该允许添加空商品。

我们将通过添加新商品前检查值来解决这个问题。

在 HTML 中，我们将添加一个用于错误消息的容器，并在有人尝试添加现有商品时编写错误消息。

实例

购物清单，可以写入错误消息：

  

    

      {{x}}×
    
  
  
  添加
  
{{errortext}}

点击 "运行实例" 按钮查看在线实例

第 5 步：设计

该应用程序可以运行，但可以使用更好的设计。我们使用 W3.CSS 样式表来设计我们的应用程序。

添加 W3.CSS 样式表，并在整个应用程序中包含适当的类，结果将与本页顶部的购物清单相同。

实例

使用 W3.CSS 样式表来设计您的应用程序：

点击 "运行实例" 按钮查看在线实例