有具体的代码可供参考吗
时间: 2023-09-11 07:06:55 浏览: 98
以下是一个简单的示例代码,展示了如何使用 AngularJS 和 Ionic JavaScript 创建一个简单的点餐应用程序:
app.js:
```javascript
angular.module('starter', ['ionic'])
.controller('MenuCtrl', function($scope) {
$scope.items = [
{ name: '麻辣火锅', price: 88 },
{ name: '宫保鸡丁', price: 38 },
{ name: '水煮鱼', price: 58 },
{ name: '糖醋排骨', price: 48 }
];
$scope.order = [];
$scope.addToOrder = function(item) {
$scope.order.push(item);
};
$scope.removeFromOrder = function(index) {
$scope.order.splice(index, 1);
};
});
```
index.html:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点餐应用程序</title>
<!-- Ionic CSS -->
<link href="https://code.ionicframework.com/1.3.3/css/ionic.min.css" rel="stylesheet">
<!-- Ionic JavaScript -->
<script src="https://code.ionicframework.com/1.3.3/js/ionic.bundle.min.js"></script>
<!-- App JavaScript -->
<script src="app.js"></script>
</head>
<body ng-app="starter">
<!-- 菜单列表 -->
<ion-header-bar class="bar-positive">
<h1 class="title">今日菜单</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in items">
<h2>{{item.name}}</h2>
<p>{{item.price}} 元</p>
<button class="button button-positive" ng-click="addToOrder(item)">加入订单</button>
</ion-item>
</ion-list>
</ion-content>
<!-- 订单列表 -->
<ion-header-bar class="bar-assertive">
<h1 class="title">我的订单</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="item in order">
<h2>{{item.name}}</h2>
<p>{{item.price}} 元</p>
<button class="button button-assertive" ng-click="removeFromOrder($index)">删除</button>
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
```
这个简单的应用程序包括两个部分:菜单列表和订单列表。菜单列表显示可供选择的菜品,用户可以通过点击 "加入订单" 按钮将其添加到订单列表中。订单列表显示已选择的菜品,用户可以通过点击 "删除" 按钮将其从订单中删除。
阅读全文