W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <!-- 引入 AngularJS 框架 --> <script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script> <body> <script> // 创建一个 AngularJS 模块，名为 "myShoppingList" var app = angular.module("myShoppingList", []); // 定义一个控制器 "myCtrl" app.controller("myCtrl", function($scope) { // 初始化一个购物列表数组，包含默认商品 $scope.products = ["Milk", "Bread", "Cheese"]; // 定义添加商品的函数 $scope.addItem = function () { // 将输入框中的商品添加到购物列表数组中 $scope.products.push($scope.addMe); } }); </script> <!-- AngularJS 应用根元素 --> <div ng-app="myShoppingList" ng-controller="myCtrl"> <!-- 显示购物列表 --> <ul> <!-- 使用 ng-repeat 指令循环遍历商品数组 --> <li ng-repeat="x in products">{{x}}</li> </ul> <!-- 输入框，用于输入新商品 --> <input ng-model="addMe"> <!-- 添加按钮，点击调用 addItem 函数 --> <button ng-click="addItem()">Add</button> </div> <!-- 页面底部的提示文本 --> <p>在输入框中输入内容可添加项目。</p> </body> </html>