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"]; }); </script> <!-- AngularJS 应用根元素 --> <div ng-app="myShoppingList" ng-controller="myCtrl"> <!-- 显示购物列表 --> <ul> <!-- 使用 ng-repeat 指令循环遍历商品数组 --> <li ng-repeat="x in products">{{x}}</li> </ul> </div> <!-- 页面底部的说明文本 --> <p>到目前为止，我们已经基于数组的元素创建了一个 HTML 列表。</p> </body> </html>