AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。
创新互联主要从事成都网站建设、成都网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务青浦,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220渲染指令
ng-bind:
相当于:
`something`
ng-bind-template:
如果用ng-bind-template,则相当于:
ng-init:
初始化一个变量。
`something`
在页面显示的是what a hot day。
ng-repeat:
循环输出。
其中,$index为当前循环到的下标,boolean值$first表示是否为头元素,boolean值$last表示是否为尾元素,boolean值$middle表示是否为非头非尾元素。
- index:{{$index}}
- isFirst?{{$first}}
- isMiddle?{{$middle}}
- isLast?{{$last}}
结果为:
ng-include:
加载另一个HTML页面。
使用ng-include加载另一页面到当前页面,浏览器会提示错误。使用ng-include指令的时候,会用到AJAX请求XMLHttpRequest。但是我们是直接用浏览器打开的当前网页,并没有通过web容器访问,所以存在跨域访问问题,加载http://www.scut.edu.cn/jw2005/也就失败了。解决办法很简单:将代码部署到tomcat等web容器下,通过http访问即可。或者使用webstorm,会自动地启动web容器。
事件指令
ng-click,ng-dbclick,ng-mousedown,ng-mouseup,ng-mouseenter,ng-mouseleave,ng-mousemove,ng-over,ng-submit 这些和JavaScript原生的on-系列指令是类似的。
ng-change:
`anything`
节点指令
ng-style:
和HTML的style是一样的。
ng-class:
ng-class="{className:expression}" 如果expression为true,则使用className这个class。
ng-class-odd:
多用于表格,单数行的样式。
ng-class-even:
多用于表格,偶数行的样式。
ng-show:
ng-show="expression"如果expression为true,则显示。
ng-hide:
ng-hide="expression"如果expression为true,则隐藏。
ng-switch:
如果expression为true,显示good,否则会显示bad。
ng-src:
Copyright © 2022 青羊区小谭信息技术咨询服务工作室 乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25