AngularJS语法详解_AngularJS
程序员文章站
2022-05-11 13:48:25
...
模板和数据的基本运作流程如下:
表单
表单
表单
表单
用户请求应用起始页面
用户的浏览器向服务器发起一次http连接,然后加载index.html页面,这个页面包含了模板
angular被加载到页面中,等待页面加载完成,查找ng-app指令,用来定义模板的边界
angular遍历模板,查找指定和绑定关系,将触发一些列动作:注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后,应用将会启动起来,并将模板转换成DOM视图
连接到服务器去加载需要展示给用户的其他数据
显示文本
一种使用{{}}形式,如{{greeting}} 第二种ng-bind="greeting"
使用第一种,未被渲染的页面可能会被用户看到,index页面建议使用第二种,其余的页面可以使用第一种
表单输入
复制代码 代码如下:
在某些情况下,我们不想一有变化就立刻做出动作,而是要进行等待。例如:
复制代码 代码如下:
非表单提交型的交互,以click为例
复制代码 代码如下:
列表、表格以及其他迭代型元素
ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:
复制代码 代码如下:
{{$index+1}} | {{student.name}} | {{student.score}} |
隐藏与显示
ng-show和ng-hide功能是等价的,但是运行效果正好相反。
复制代码 代码如下:
- Stun
- Disintegrate
- Erase from history
css类和样式
ng-class和ng-style都可以接受一个表达式,表达式执行的结果可能是如下取值之一:
表示css类名的字符串,以空格分隔
css类名数组
css类名到布尔值的映射
代码示例如下:
复制代码 代码如下:
{{messageText}}
css类名到布尔值的映射
示例代码如下:
复制代码 代码如下:
{{restaurant.name}} | {{restaurant.cuisine}} |
上一篇: php验证类
下一篇: mysql 让一个存储过程定时作业的代码