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;
}