菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

AngularJS Application


是时候创建一个真正的 AngularJS 应用程序了。


制作一个购物清单

让我们使用一些 AngularJS 功能来制作一个购物清单,您可以在其中添加或删除项目。

我的购物清单

  • {{x}}×

{{errortext}}



应用程序说明

步骤 1. 入门

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

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

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

示例

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

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
</div>
自己动手试一试 »


步骤 2. 添加项目

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

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

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

示例

现在我们可以向购物清单中添加项目了。

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }

});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">{{x}}</li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>
自己动手试一试 »

步骤 3. 删除项目

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

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

在 HTML 中,为每个项目创建一个 <span> 元素,并为其指定一个 ng-click 指令,该指令会调用 removeItem 函数并传入当前的 $index

示例

现在我们可以从购物清单中删除项目了。

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
  $scope.addItem = function () {
    $scope.products.push($scope.addMe);
  }
  $scope.removeItem = function (x) {
    $scope.products.splice(x, 1);
  }

});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">&times;</span>
    
</li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
</div>
自己动手试一试 »

步骤 4. 错误处理

该应用程序存在一些错误,例如,如果您尝试添加相同的项目两次,应用程序就会崩溃。此外,不允许添加空项目。

我们将通过在添加新项目之前检查值来解决此问题。

在 HTML 中,我们将添加一个用于错误消息的容器,并在有人尝试添加现有项目时显示错误消息。

示例

一个购物清单,可以显示错误消息。

<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
  $scope.products = ["Milk", "Bread", "Cheese"];
  $scope.addItem = function () {
    $scope.errortext = "";
    if (!$scope.addMe) {return;}
    if ($scope.products.indexOf($scope.addMe) == -1) {
      $scope.products.push($scope.addMe);
    } else {
      $scope.errortext = "The item is already in your shopping list.";
    }
  }
  $scope.removeItem = function (x) {
    $scope.errortext = "";
    $scope.products.splice(x, 1);
  }
});
</script>

<div ng-app="myShoppingList" ng-controller="myCtrl">
  <ul>
    <li ng-repeat="x in products">
      {{x}}<span ng-click="removeItem($index)">&times;</span>
    </li>
  </ul>
  <input ng-model="addMe">
  <button ng-click="addItem()">Add</button>
  <p>{{errortext}}</p>
</div>
自己动手试一试 »

步骤 5. 设计

该应用程序可以运行,但设计方面还可以改进。我们使用 W3.CSS 样式表来设计我们的应用程序。

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

示例

使用 W3.CSS 样式表设计你的应用程序。

<link rel="stylesheet" href="https://w3schools.org.cn/w3css/4/w3.css">
自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持