angularjs——div+angularjs实现下拉树
来源：互联网 发布：尔雅网络课中国古代史 编辑：程序博客网 时间：2024/06/10 22:59
angularjs——div+angularjs实现下拉树
1.效果图
2.前台代码
<ons-page ng-controller="checkPointController" ng-init="checkPointdata"> <ons-toolbar class="hlxny-head" ng-class="{'isIOS':isIOS}"> <div class="left layout-row layout-align-center-center" ng-click="mainNavi.popPage()"> <hy-img-btn hya-icon-img="img/energy/back.png" class="charge-toolbar-img-btn "></hy-img-btn> </div> <div class="center hlxny-text">选择监测点</div> </ons-toolbar> <ons-scroller style="background-color: #ffffff" > <div class="hlxny-xzjcd"> <div class="hlxny-xzjcd-l" ></div> <div class="hlxny-xzjcd-r">选择监测点</div> </div> <div class="hlxny-jcd-first "> <div ng-show="showF" class="hlxny-triangle-s " ng-click="checkPointF(checkPointdata.code)"></div> <div ng-show="!showF" class="hlxny-triangle-r" ng-click="checkPointF(checkPointdata.code)" ></div> <div class="hlxny-jcd-name hlxny-color-text" ng-click="checkPointF(checkPointdata.code)">{{(checkPointdata.name)?(checkPointdata.name):" "}}</div> <div class="hlxny-jcd-true" ng-click="checkPointTrue(checkPointdata.code,checkPointdata.name)"> </div> </div> <hr class="hlxny-jcd-hr" /> <div data-ng-init="load()" ng-show="showF" ng-repeat="x in checkPointdata.childDevice" > <div class="hlxny-jcd-first"> <div ng-show="showX" class="hlxny-triangle-s hlxny-m-left" ng-click="checkPointX(x.code)" ></div> <div ng-show="!showX" class="hlxny-triangle-r hlxny-m-left" ng-click="checkPointX(x.code)"></div> <div class="hlxny-jcd-x hlxny-color-text" ng-click="checkPointX(x.code)" >{{x.name}}</div> <div class="hlxny-jcd-true" ng-click="checkPointTrue(x.code,x.name)" > </div> </div> <hr class="hlxny-jcd-hr" /> <div ng-class="{'hlxny-xbfx-none':x.code!=xcode,'hlxny-xbfx-block':x.code==xcode}" ng-repeat="y in x.childDevice" ng-click="versionDetail(y,y.childDevice)"> <div class="hlxny-jcd-first"> <div ng-show="y.code==ycode" class="hlxny-triangle-s hlxny-my-left" ng-click="checkPointY(y.code)"></div> <div ng-show="y.code!=ycode" class="hlxny-triangle-r hlxny-my-left" ng-click="checkPointY(y.code)" ></div> <div class="hlxny-jcd-y hlxny-color-text " ng-click="checkPointY(y.code)" >{{ y.name}}</div> <div class="hlxny-jcd-true" ng-click="checkPointTrue(y.code,y.name)" > </div> </div> <hr class="hlxny-jcd-hr" /> <div ng-class="{'hlxny-xbfx-none':y.code!=ycode,'hlxny-xbfx-block':y.code==ycode}" ng-repeat="z in y.childDevice" ng-click="versionDetail(z,z.childDevice)"> <div class="hlxny-jcd-first"> <div class="hlxny-jcd-z hlxny-color-text">{{z.name}}</div> <div class="hlxny-jcd-true" ng-click="checkPointTrue(z.code,z.name)" > </div> </div> <hr class="hlxny-jcd-hr" /> </div> </div> </div> </ons-scroller></ons-page>3.控制器代码
app.controller('checkPointController', ['$scope','$timeout','$hyHttp','$rootScope','$loginService',function($scope,$timeout,$hyHttp,$rootScope,$loginService){ $scope.showF=false; $scope.showX=false; $scope.showY=false; $scope.xcode='0'; $scope.ycode='0'; $scope.show='0'; $scope.pathUrl = mainNavi.getCurrentPage().options.pathUrl; $scope.showModal('数据加载中...');//显示遮罩层 var config = { cache: false, responseType: 'json' }; var customerNo = localStorage.getItem('curBusiUser'); var data = { customerNo: customerNo }; $hyHttp.post('getDeviceTree',config,data).success(function(result){ if (result.code == '0') { $scope.hideModal(); $scope.checkPointdata = result.content; } else if (result.code = '1') { $scope.hideModal(); $scope.checkPointdata =""; $scope.toast('数据加载失败！'); } }).error(function (data) { $scope.hideModal(); $scope.checkPointdata =""; $scope.toast('数据加载失败！'); }); $scope.checkPointF= function(content){ if ( $scope.showF){ $scope.showF=false; }else{ $scope.showF=true; } }; $scope.checkPointX= function(contentX){ if(!$scope.showX) { $scope.xcode=contentX; $scope.showX=true; }else { $scope.xcode='0'; $scope.showX=false; } /*if (document.getElementsByClassName(content).length>0&& $scope.showX){ $scope.showX=false; for (var i=0;i<document.getElementsByClassName(content).length;i++){ document.getElementsByClassName(content)[i].style.display="none"; } } else if (document.getElementsByClassName(content).length>0&& !$scope.showX){ $scope.showX=true; for (var i=0;i<document.getElementsByClassName(content).length;i++){ document.getElementsByClassName(content)[i].style.display="block"; } }*/ }; $scope.checkPointY= function(contentY){ if(!$scope.showY) { $scope.ycode=contentY; $scope.show=contentY; $scope.showY=true; return; }else if($scope.showY&&$scope.show==contentY) { $scope.ycode='0'; $scope.show='0'; $scope.showY=false; return; }else if($scope.showY&&$scope.show!=contentY) { $scope.ycode=contentY; $scope.show=contentY; $scope.showY=true; } /* if (document.getElementsByClassName(content).length>0&& $scope.showY){ $scope.showY=false; for (var i=0;i<document.getElementsByClassName(content).length;i++){ document.getElementsByClassName(content)[i].style.display="none"; } } else if (document.getElementsByClassName(content).length>0&& !$scope.showY){ $scope.showY=true; for (var i=0;i<document.getElementsByClassName(content).length;i++){ document.getElementsByClassName(content)[i].style.display="block"; } }*/ }; $scope.checkPointTrue= function(content,name){ var checkPointData={"deviceId":content,"name":name}; $scope.$emit("checkPointEmit",checkPointData); mainNavi.popPage(); /* mainNavi.replacePage($scope.baseUrl+ $scope.pathUrl,{deviceId:content,name:name,cancelIfRunning:true});*/ };/* $scope.load = function() { if( $scope.checkPointdata.childDevice.length>0) { for (var i = 0; i < $scope.checkPointdata.childDevice.length; i++) { $scope.showX=false; console.log($scope.checkPointdata.childDevice[i].code); console.log(document.getElementsByClassName($scope.checkPointdata.childDevice[i].code).length); for (var x=0;x<document.getElementsByClassName($scope.checkPointdata.childDevice[i].code).length;x++){ document.getElementsByClassName($scope.checkPointdata.childDevice[i].code)[x].style.display="none"; } if($scope.checkPointdata.childDevice[i].childDevice.length>0){ for (var j = 0;j <$scope.checkPointdata.childDevice[i].childDevice.length; j++) { $scope.showY=false; console.log($scope.checkPointdata.childDevice[i].childDevice[j].code); console.log(document.getElementsByClassName($scope.checkPointdata.childDevice[i].childDevice[j].code).length); for (var y=0;y<document.getElementsByClassName($scope.checkPointdata.childDevice[i].childDevice[j].code).length;y++){ document.getElementsByClassName($scope.checkPointdata.childDevice[i].childDevice[j].code)[y].style.display="none"; } } } } } }*/}]);4.css样式/*监测点选择*/.hlxny-xzjcd{ width: 100%; height: 50px; background-color: #f9f9f9; margin-top: 10px; position: relative; border-bottom: 1px solid #e7e7e7; border-top: 1px solid #e7e7e7;}.hlxny-xzjcd-l{ width: 50px; height: 50px; background: url('../../img/energy/dete.png') center no-repeat; background-size:20px 20px; float: left;}.hlxny-xzjcd-r{ width: calc(100% - 50px); height: 50px; line-height: 50px; color: #52526d; font-size: 18px; float: left;}.hlxny-jcd-firstT{ margin-top: 20px;}.hlxny-jcd-first{ width: 100%; height: 40px; margin-top: 10px}.hlxny-jcd-true{ width: 20%; height: 40px; float: right; font-size: 15px; background: url('../../img/energy/triangle-T.png') center no-repeat; background-size:8px 12px;}.hlxny-triangle-s{ width: 50px; height: 40px; float: left; background: url('../../img/energy/triangle-s.png') center no-repeat; background-size:12px 10px;}.hlxny-triangle-r{ width: 50px; height: 40px; float: left; background: url('../../img/energy/triangle-r.png') center no-repeat; background-size:10px 12px;}.hlxny-jcd-name{ width: calc(80% - 50px); height: 40px; font-size: 18px; line-height: 40px; float: left; /* display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; !*1行*! overflow: hidden;*/ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.hlxny-m-left{ margin-left: 20px;}.hlxny-color-text{ color: #75758a;}.hlxny-jcd-x{ width: calc(80% - 70px); height: 40px; font-size: 15px; line-height: 40px; float: left;}.hlxny-my-left{ margin-left: 40px;}.hlxny-jcd-y{ line-height: 40px; height: 40px; width: calc(80% - 90px); font-size: 12px; float: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.hlxny-jcd-z{ height: 40px; width: calc(80% - 120px); font-size: 10px; margin-left: 120px; float: left; line-height: 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}.hlxny-jcd-hr{ height:1px; border:none; border-top:1px solid #e7e7e7;}.hlxny-xbfx-none{ display: none;}.hlxny-xbfx-block{ display: block;}阅读全文
0 0
- angularjs——div+angularjs实现下拉树
- AngularJs 实现下拉树
- angularjs实现下拉加载更多
- AngularJS系列(五)——下拉框
- AngularJS（二）——常见指令以及下拉框实现
- angularjs实现下拉列表的选中事件
- 简单的下拉多选angularjs 实现
- angularJS实现可编辑的下拉框
- angularJS实现动态添加,删除div
- 深究AngularJS——下拉框（selected）
- angularjs实现
- angularjs实现
- angularjs实现
- AngularJS + Ionic 下拉刷新
- angularjs 下拉搜索框
- AngularJs下拉搜索框
- angularjs下拉列表 select
- AngularJS 下拉表翻译
- 嵌套应该注意的二点
- 获取网络数据—NetDataUtil
- bzoj 1570: [JSOI2008]Blue Mary的旅行
- linux vim 文本编辑器
- ASE 加密
- angularjs——div+angularjs实现下拉树
- 基于socket.io的php扩展介绍---phpsocket.io
- dll
- jquery.autocomplete.js使用方法
- NDK各个版本链接
- java修饰符
- npm 安装express npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
- ElasticSearch语法
- 剑指06-旋转数组的最小值
