angular部分指令的简单使用

来源：互联网发布：网络约车平台哪家好编辑：程序博客网时间：2024/05/22 17:19

一.AngularJS 指令

指令描述ng-app定义应用程序的根元素。ng-bind绑定 HTML 元素到应用程序数据ng-bind-html绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符ng-bind-template规定要使用模板替换的文本内容ng-blur规定 blur 事件的行为ng-change规定在内容改变时要执行的表达式ng-checked规定元素是否被选中ng-class指定 HTML 元素使用的 CSS 类ng-class-even类似 ng-class，但只在偶数行起作用ng-class-odd类似 ng-class，但只在奇数行起作用ng-click定义元素被点击时的行为ng-cloak在应用正要加载时防止其闪烁ng-controller定义应用的控制器对象ng-copy规定拷贝事件的行为ng-csp修改内容的安全策略ng-cut规定剪切事件的行为ng-dblclick规定双击事件的行为ng-disabled规定一个元素是否被禁用ng-focus规定聚焦事件的行为ng-form指定 HTML 表单继承控制器表单ng-hide隐藏或显示 HTML 元素ng-href为 the <a> 元素指定链接ng-if如果条件为 false 移除 HTML 元素ng-include在应用中包含 HTML 文件ng-init定义应用的初始化值ng-jq定义应用必须使用到的库，如：jQueryng-keydown规定按下按键事件的行为ng-keypress规定按下按键事件的行为ng-keyup规定松开按键事件的行为ng-list将文本转换为列表 (数组)ng-model绑定 HTML 控制器的值到应用数据ng-model-options规定如何更新模型ng-mousedown规定按下鼠标按键时的行为ng-mouseenter规定鼠标指针穿过元素时的行为ng-mouseleave规定鼠标指针离开元素时的行为ng-mousemove规定鼠标指针在指定的元素中移动时的行为ng-mouseover规定鼠标指针位于元素上方时的行为ng-mouseup规定当在元素上松开鼠标按钮时的行为ng-non-bindable规定元素或子元素不能绑定数据ng-open指定元素的 open 属性ng-options在 <select> 列表中指定 <options>ng-paste规定粘贴事件的行为ng-pluralize根据本地化规则显示信息ng-readonly指定元素的 readonly 属性ng-repeat定义集合中每项数据的模板ng-selected指定元素的 selected 属性ng-show显示或隐藏 HTML 元素ng-src指定 <img> 元素的 src 属性ng-srcset指定 <img> 元素的 srcset 属性ng-style指定元素的 style 属性ng-submit规定 onsubmit 事件发生时执行的表达式ng-switch规定显示或隐藏子元素的条件ng-transclude规定填充的目标位置ng-value规定 input 元素的值

二.部分指令的代码展示

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="angular-1.3.0.js"></script></head><body ng-app=""><div>{{8 + 2}}</div><div>{{8 - 2}}</div><div>{{8 / 2}}</div><div>{{8 * 2}}</div><hr/><div ng-init="user={id: 1,name: 'zhang'}"></div><div>id:<span ng-bind="user.id"></span></div><div>name:<span ng-bind="user.name"></span></div><hr/><div ng-init="usernames = ['张三', '李四', '王五']">    <ul ng-repeat="name in usernames | limitTo : 2 ">        <li>{{name}}</li>    </ul></div><hr><div ng-init="usernames_en = ['zhangsan', 'lisi', 'wangwu', 'zhaolu']">    <ul ng-repeat="name in usernames_en | filter : 'a' ">        <li>{{name}}</li>    </ul></div><button ng-init="clickNum = 0" ng-click="clickNum = clickNum+1 ">点击我，增加次数</button><p>点击次数：<i>{{ clickNum }}</i></p><hr><div ng-init="books = [{id: 1, title: 'Java编程思想', isRecommend: false, dtCreated: '00-00 00:01'}, {id: 1, title: 'C++编程思想', isRecommend: true, dtCreated: '00-00 00:02'}, {id: 1, title: '高性能MySQL', isRecommend: false, dtCreated: '00-00 00:03'}]">    <table border="1" cellpadding="10" cellspacing="0" style="text-align: center">        <tr>            <!--设置表头-->            <td>id</td>            <td>title</td>            <td>isRecommend</td>            <td>dtCreated</td>        </tr>        <!--使用ng-repeat，遍历所有的user-->        <tr ng-repeat="user in books">            <td>{{user.id}}</td>            <td>{{user.title}}</td>            <td>{{user.isRecommend}}</td>            <td>{{user.dtCreated}}</td>        </tr>    </table></div></body></html>

阅读全文

0 0