AngularJS中的内置指令
AngularJS可以把模版编写成HTML的形式,利用指令来拓展HTML标签,增加声明式语法来实现想做的任何事情。AngularJS的内置指令包括渲染指令、事件指令和节点指令。
创新互联公司主营通川网站建设的网络公司,主营网站建设方案,app软件开发公司,通川h5成都微信小程序搭建,通川网站营销推广欢迎通川等地区企业咨询
渲染指令
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:
- good
- bad
如果expression为true,显示good,否则会显示bad。
ng-src:
ng-href:
类似ng-src。
ng-if:
类似ng-show。
网站题目:AngularJS中的内置指令
标题路径:http://myzitong.com/article/ppcoch.html