以下是一个使用AngularJS的简单示例,包含中餐、姓名和数字输入。
HTML代码:
AngularJS Demo
请选择中餐:
请输入您的姓名:
请输入数字:
您选择的中餐有:
- {{dish}}
您的姓名是:{{name}}
您输入的数字是:{{number}}
这个示例中,我们使用了AngularJS的ng-app
和ng-controller
指令来定义AngularJS应用的范围和控制器。ng-model
指令用于双向绑定数据,使得我们可以在JavaScript中访问和修改用户的输入。
中餐选择部分使用了ng-repeat
指令来循环渲染菜品列表,并使用ng-model
指令和ng-change
指令来跟踪用户选择的菜品。
姓名输入部分使用了ng-model
指令来绑定用户输入的姓名。
数字输入部分使用了ng-model
指令来绑定用户输入的数字。
最后,我们通过插值表达式{{}}
来显示用户选择的中餐、姓名和数字。
请注意,这只是一个简单的示例,用于演示AngularJS的基本用法。实际应用中,您可能需要更复杂的逻辑和样式来满足您的需求。