angularJS 常用的渲染指令、事件指令和节点指令
发布时间:2020-12-17 09:51:18 所属栏目:安全 来源:网络整理
导读:渲染指令: 1 ) ng-init : 初始化变量 例: ng-init="cityArr=[' 上海 ',' 北京 ',' 杭州 ']" 2 ) ng-bind : 绑定模型 例: p ng-bind= "1+1" / p 3 ) ng-bind-template: 绑定模型 不加 {{}} 则直接绑定内容 例: p ng-bind-template= "{{ 1+3 }}" / p
渲染指令: 1)ng-init: 初始化变量 例:ng-init="cityArr=['上海','北京','杭州']" 2)ng-bind: 绑定模型 例:<p ng-bind="1+1"></p> 3)ng-bind-template: 绑定模型 不加{{}}则直接绑定内容 例:<p ng-bind-template="{{ 1+3 }}"></p> 4)ng-repeat: 例:ng-repeat="city in cityArr" $index 当前索引 $first 是否为头元素 $middle 是否为非头非尾元素 $last 是否为尾元素 5)ng-include:载入另一个页面 例:<div ng-include="'other.html'"></div> 或:<div ng-include src="'other.html'"></div> 事件指令: 1)ng-click:指定点击事件 例:ng-click="changeStatus($event)" 在控制器中定义具体事件执行代码: $scope.changeStatus=function(event){ $scope.status= !$scope.status; angular.element(event.target).html('切换状态 '+$scope.status); //通过angular.element()转换成jquery对象 }; 节点指令: 1)ng-style 先在控制器中定义一个样式: $scope.defaultStyle={color:'red','margin-top':'50px'}; 再应用在页面上:<div ng-style="defaultStyle"> 2)ng-class 当表达式为真时添加某个class, 例: ng-class="{ red:status }" 3)ng-class-even 当前行是偶数行时添加某个class 例: ng-class-even="'evenRow'" 4)ng-class-odd 当前行是奇数行是添加某个calss(第1行为奇数行) 例: ng-class-odd="'oddRow'" 5)ng-show 为真时显示,例: <div ng-show="status">status为真时显示</div> 6)ng-hide 为真时隐藏 7)ng-switch 例如: <ul ng-switch on="status"> <li ng-switch-when="true"> true 呵呵 </li> <li ng-switch-when="false"> false 呵呵呵 </li> </ul> 8)ng-src 表达式作为图片url,例:<img ng-src="{{src}}"> 9)ng-href 表达式作为url 10)ng-if 为真时显示:<div ng-if="status">为真时显示</div> 注:所有ng-指令里,除变量外的所有字符串都必须加'' (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |