实现根据后台返回的数据属性设置页面样式
需求：后台返回的数据为此种格式，子与父无层级区分，都是一条条数据返回的，只可以根据pid去判断是否为父级列表，并和子列表样式进行区别设置。
效果图：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现根据后台返回的数据属性设置页面样式</title> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <style type="text/css"> .table-center td.parent:before { content:"|-"; text-align: left; } .table-center td.parent { content:"|-"; text-align: left; } .table-center td.son:before { content:"|--"; text-align: left; } .table-center td.son{ text-align: left; text-indent: 2em; } </style> </head> <body ng-app='app'> <div class="container-fluid" ng-controller="authorityManageCtrl"> <div class="clearfix row"> <table class="table table-bordered table-striped table-center" style="margin-top: 20px;"> <thead> <tr> <th rowspan="2" style="vertical-align: middle !important;">节点描述</th> <th rowspan="2">节点名称</th> <th rowspan="2" style="width:400px;">类型</th> <th rowspan="2">操作</th> </tr> </thead> <tbody> <tr ng-repeat="(index,tabledata) in nodeLists"> <td ng-bind="tabledata.title" ng-class="{'parent':tabledata.isParent,'son':!tabledata.isParent}"></td> <td ng-bind="tabledata.name"></td> <td ng-bind="tabledata.levelMsg"></td> <td> <button class="btn btn-xs btn-danger" type="button" ng-click="delete(index,tabledata.id)">删除</button> <!--<button class="btn btn-xs btn-warning" type="button" ng-click="modifyNode(index,tabledata)">修改</button>--> </td> </tr> </tbody> </table> </div> </div> <script type="text/javascript" src='angular.js'></script> <script type="text/javascript"> var module = angular.module("app",[]); module.controller("authorityManageCtrl",["$scope",function($scope){ $scope.nodeLists=[ { "id": "1", "name": "App", "title": "APP数据汇总", "pid": "0", "level": "2", "sort": "0", "remark": null }, { "id": "2", "name": "getAppLaunchCount", "title": "启动数", "pid": "1", "level": "3", "sort": "1", "remark": null }, { "id": "3", "name": "getAppActivateCount", "title": "激活数", "pid": "1", "level": "3", "sort": "3", "remark": null }, { "id": "5", "name": "getAppSignupCount", "title": "注册数", "pid": "1", "level": "3", "sort": "4", "remark": null }, { "id": "9", "name": "Loanmarket", "title": "贷款超市", "pid": "0", "level": "2", "sort": "0", "remark": null }, { "id": "11", "name": "getLoanmarketCount", "title": "UVPV统计", "pid": "9", "level": "3", "sort": "1", "remark": null }, { "id": "14", "name": "getLoanmarketCount2", "title": "UVPV统计2", "pid": "9", "level": "3", "sort": "14", "remark": null }, { "id": "6", "name": "Datamonitor", "title": "数据监控", "pid": "0", "level": "2", "sort": "1", "remark": null }, { "id": "7", "name": "getOrderCountHour", "title": "下单监控", "pid": "6", "level": "3", "sort": "1", "remark": null }, { "id": "8", "name": "getRegistCountHour", "title": "注册监控", "pid": "6", "level": "3", "sort": "2", "remark": null }, { "id": "10", "name": "getTestCountHour", "title": "渠道监控", "pid": "6", "level": "3", "sort": "3", "remark": null }, { "id": "12", "name": "Test", "title": "测试", "pid": "0", "level": "2", "sort": "12", "remark": null }, { "id": "13", "name": "getTestCount1", "title": "测试子级一", "pid": "12", "level": "3", "sort": "13", "remark": null }, { "id": "18", "name": "1113", "title": "1113", "pid": "12", "level": "3", "sort": "1113", "remark": null }, { "id": "19", "name": "1114", "title": "1114", "pid": "12", "level": "3", "sort": "1114", "remark": null }, { "id": "15", "name": "1111", "title": "1111", "pid": "0", "level": "2", "sort": "111", "remark": null }, { "id": "17", "name": "111-1", "title": "1111", "pid": "15", "level": "3", "sort": "1111", "remark": null }, { "id": "16", "name": "222", "title": "222", "pid": "0", "level": "2", "sort": "222", "remark": null } ]; angular.forEach($scope.nodeLists, function(item,index,array){ if($scope.nodeLists[index]['pid'] == 0){ $scope.nodeLists[index]['isParent']= true; }else { $scope.nodeLists[index]['isParent']= false; $scope.parent=false; } if($scope.nodeLists[index]['level']==1){ $scope.nodeLists[index]['levelMsg'] = '项目'; }else if ($scope.nodeLists[index]['level']==2){ $scope.nodeLists[index]['levelMsg'] = '模块'; }else { $scope.nodeLists[index]['levelMsg'] = '操作'; } }); console.log($scope.nodeLists); }]) </script> </body> </html>
如果pid=0，就给当前的$scope.nodeLists[index]的'isParent'属性设为TRUE，页面通过ng-repeat="(index,tabledata) in nodeLists"就可以获得isParent的属性，由ng-class="{'parent':tabledata.isParent,'son':!tabledata.isParent}"可知，当isParent=TRUE时，绑定的class为parent,当isParent=FALSE时，绑定的class为son。
努力将自己的温暖带给身边的人！！！！！
