结构-行为-样式-angularJs
来源:互联网 发布:oracle sql书写技巧 编辑:程序博客网 时间:2024/06/11 01:05
- ngModel实现Select;
- 分页插件的使用;
- 在
scope域外调用 scope的方法; - Controller尽量不要取相同的名字;
- ng-repeat有重复值的解决办法;
- ng-class的使用;
- Angular中a标签;
- angular.forEach;
- ng-hide,ng-show;
- 只取一次数据函数;
1、ngModel实现Select
a、html:
<div class="label-search input-group col-lg-2 clearfix" > <label>组名:</label> <select type="button" class="btn btn-default" ng-options="item.value as item.name for item in myGroup" ng-model="labelGroup" ></select> </div>
b、ng-controller:
$scope.myGroup = [{name:'全部',value:''}, {name:'区域位置',value:'区域位置'}, {name:'重复购买',value:'重复购买'}, {name:'意向等级',value:'意向等级'}]; $scope.labelGroup = '';
注释:
值 as 显示标签 for 一个对象 in 对象数组",值,对应labelGroup的值;
select演变一
<div class="form-group clearfix"><label for="lastname" class="col-sm-1 control-label common-label-center common-add-label">标签分组:</label><div class="col-sm-2"><select class="form-control" ng-click="anyone(cLabel)" ng-model="cLabel.selectedLevelOne" ng-change="cLabel.selectedLevelTwo=''" ng-options="group.name for group in addlabelSelectInfo" ><option value="">---请选择一---</option></select></div><div class="col-sm-2" ng-show="cLabel.selectedLevelOne&&cLabel.selectedLevelOne.LevelTwo"><select class="form-control" ng-model="cLabel.selectedLevelTwo" ng-change="cLabel.selectedLevelThree=''" ng-options="LevelTwo.name for LevelTwo in cLabel.selectedLevelOne.LevelTwo"><option value="">---请选择二---</option></select></div><div class="col-sm-2" ng-show="cLabel.selectedLevelTwo&&cLabel.selectedLevelOne&&cLabel.selectedLevelTwo.LevelThree"><select class="form-control" ng-model="cLabel.selectedLevelThree" ng-change="cLabel.selectedLevelFour=''" ng-options="LevelThree.name for LevelThree in cLabel.selectedLevelTwo.LevelThree"><option value="">---请选择三---</option></select></div><div class="col-sm-2" ng-show="cLabel.selectedLevelThree&&cLabel.selectedLevelTwo&&cLabel.selectedLevelOne&&cLabel.selectedLevelThree.LevelFour"><select class="form-control" ng-model="cLabel.selectedLevelFour" ng-options="LevelFour.name for LevelFour in cLabel.selectedLevelThree.LevelFour"><option value="">---请选择四---</option></select></div></div>
数据
[ { "code": "99", "name": "标准标签", "LevelTwo": [ { "code": "9901", "name": "客户资产", "LevelThree": [ { "code": "990101", "name": "资产一", "LevelFour": [ { "code": "99010101", "name": "资产一子一" }, { "code": "99010102", "name": "资产一子二" } ] }, ...... ] }, ......
在原来的基础上,通过Model和ng-change的配合使用,使多个Select级联。
演变二
<div class=" role-div-cdi clearfix"> <div class="col-sm-2"> <select class="form-control" ng-model="s.info1" ng-change="changeSelect1(s.info1)" ng-options="group.name for group in selectInfo1" > <option value="">---请选择一---</option> </select> </div> <div class="col-sm-2" > <select class="form-control" ng-model="s.info2" ng-options="hhh.name for hhh in selectInfo2"> <option value="">---请选择二---</option> </select> </div></div>
通过Select1 的ng-change事件改变Select2的数据源,实现级联。
2、在$ scope域外调用$ scope的方法
element = document.querySelector('[ng-controller=help_controller]'); var $scope = angular.element(element).scope(); ...... $scope.$apply();
3、Controller尽量不要取相同的名字;
4、ng-repeat有重复值的解决办法
当你传入下面这个数组到Ng-repeat中去的时候就会报错,因为有重复数据,怎么办呢,看下面:
$scope.items = [ 'red', 'grey', 'grey'];
上面的grey明显是数组中重复的数据,传入下面Html中:
<li ng-repeat="item in items" ng-bind="item"></li>
就会报错:
Error: [ngRepeat:dupes] http://errors.angularjs.org/1.2.28/ngRepeat/dupes?p0=itemNaNn%items&p1=string%3Agrey&p2=%22grey%22
说你的数据有重复的,解决方案如下:
<li ng-repeat="item in items track by $index" ng-bind="item"></li>
5、分页插件
页面:
<ul class="pagination" id="pagination"></ul>
初始化:
$.jqPaginator('#pagination', { totalPages: total, visiblePages: 3, currentPage: currentpage, onPageChange: function (num, type) { if(type=="change"){ ...... } } });
6、ng-Class的使用
第一种:
<span ng-class="{'glyphicon glyphicon-plus': impress.plus, 'glyphicon glyphicon-minus': impress.minus}" ng-click="swiftTitle(impress)" ></span>
你可以通过ng-click方法来改变impress对象中对应的属性的True或者false,为True的时候就显示对应的Class。
第二种:
<div ng-class="{true: 'label-item-content container-fluid label-group-skin', false: 'label-item-content container-fluid'}[iseditor]" ng-show="impress.isshow">
当iseditor的值为True时显示第一个,否则显示第二个。
7、Angular中使用a标签
当你像这样
<a href="javascript:void;"></a>
就会报语法错误,最好写成
<a href="javascript:;"></a>
8、angular.forEach
angular自带的遍历方法,在一种特殊的情况下,会出现少遍历的情况,如下:
angular.forEach($scope.deleteSelected,function(value,key){ var len = $scope.myInitLabel.length; for(var i=0;i<len;i++){ if(value.id === $scope.myInitLabel[i].id){ $scope.myInitLabel.splice(i,1); } }})
上面代码中,如果执行删除原集合中的选项,在For循环中的Len长度并没有随着你删除选项执行而改变(事实上,你删除了一个,原先在第二位的移到第一位,这个时候再想删除原先第二个就不行,因为他实际上已经到第一位去了。)
解决方案:
angular.forEach($scope.deleteSelected,function(value,key){ for(var i=0;i<$scope.myInitLabel.length;i++){ if(value.id === $scope.myInitLabel[i].id){ $scope.myInitLabel.splice(i,1); } }})
就是把集合写在循环中,实时更新集合长度。
9、ng-hide/ng-show
ng-hide/ng-show是控制显示隐藏的,但是有一个情况是:当你显示A的时候,不想显示B;显示B的时候不想显示A;
<div class="label-search-common "><div class="btn btn-default" ng-click="changeMainWindow()" ng-hide="deleteMask" ng-show="ismainwindow"><span class="glyphicon glyphicon-plus"></span> <span>添加</span></div><div class="btn btn-default" ng-hide="ismainwindow" ng-click="changeMainWindow()"><span class="">返回</span></div></div><div class="label-search-common "><div class="btn btn-default" ng-hide="deleteMask" ng-show="ismainwindow"ng-click="showDeleteMask()"><span class=" glyphicon glyphicon-minus"></span> <span>删除标签</span></div><div class="btn btn-default" ng-show="deleteMask"ng-click="deleteLabel();"><span class="">确认删除</span></div><div class="btn btn-default" ng-show="deleteMask"ng-click="showDeleteMask();"><span class="">返回</span></div></div>
上面这两个Div就是这种情况,我省略了它们关联的Div,这样,在切换deleteMask或者ismainwindow的时候不会影响到他们内部的Div的显示与隐藏
10、只取一次数据函数
$scope.changeSelect1 = function(info){$scope.selectInfo2 = [];if(typeof $scope.initSelectInfo2 != "object"){ labelCommonServices.test2Service({},function(response){ $scope.initSelectInfo2 = response; angular.forEach(response,function(value,key){ if(info&&info.code&&(value.forcode == info.code)) $scope.selectInfo2.push(value); }) },function(response,status){ console.log("dd")});}else{ angular.forEach($scope.initSelectInfo2,function(value,key){ if(info&&info.code&&(value.forcode == info.code)) $scope.selectInfo2.push(value); })}}
1 0
- 结构-行为-样式-angularJs
- 结构-行为-样式-Angularjs-ngSanitize
- 结构-行为-样式-angularJs ngAnimate(Js实现)
- 页面:结构+样式+行为
- 结构-行为-样式
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
- 结构-行为-样式-Bootstrap笔记
- 结构+样式+行为是思想
- 结构-行为-样式-有趣的函数
- 结构和样式,行为的分离
- 前端开发如何实现结构、样式、行为彻底分离
- angularjs的聚焦行为
- angularjs结构
- WPF样式和行为
- js行为样式分离
- WPF样式和行为
- 编写高质量的代码--基础:结构和样式,行为的分离
- angularjs控制css样式
- 抛物线、导弹线轨迹计算
- 神经网络浅讲:从神经元到深度学习
- 算法_选择排序算法
- Parallel Python(PP)并行计算测试
- MVC单一入口设计思想 session入库 svn与git SAE
- 结构-行为-样式-angularJs
- Caffe Blob代码阅读
- Android 使用android-support-multidex解决Dex超出方法数的限制问题,让你的应用不再爆棚
- 关于activiti流程通过、驳回、会签、转办、中止、挂起等核心操作功能的封装
- Swift - 设置应用程序图标的提醒个数(右上角小红圈)
- 面试时,如何巧妙回答跳槽问题
- 常见网站的两种攻击方式
- SAP 开发中常用到的BAPI
- 工具的使用——vs2013(三)