angularjs——div+angularjs实现下拉树

最新推荐文章于 2020-07-06 17:44:54 发布

原创最新推荐文章于 2020-07-06 17:44:54 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#angularjs #html

HTML 同时被 3 个专栏收录

30 篇文章

订阅专栏

Web前端

23 篇文章

订阅专栏

angularJS

9 篇文章

订阅专栏

本文介绍如何使用 AngularJS 和 HTML 结构实现一个可展开的下拉树形菜单，该菜单用于监测点的选择。通过点击不同的监测点，可以逐级展开子节点，并最终选定一个监测点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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