根据json数据的值对html数据中的行进行分组。在点击显示详细信息的每个值时展开行

时间：2018-05-24 09:08:17

标签： html angularjs json angularjs-ng-repeat

我有一个JSON数据如下：

{
"data": [{
    "appDetails": [{
        "appDescription": [{
                "appName": "App X",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.1.25",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App X",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.1.24",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App X",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.1.23",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App Y",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.1.1",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App Y",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.1.2",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App Z",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.0.0",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            },
            {
                "appName": "App Z",
                "timeStamp": "",
                "GitTag": "RELEASE-1.0.0.1",
                "blocker": "3",
                "critical": "4",
                "major": "30",
                "minor": "2",
                "UnitTestsTotal": "59",
                "FailedTests": "0",
                "CodeCoverage": "90"
            }
        ]
    }]
}]}

我的angular js代码是关于http.get方法，用于从cloudant数据库中获取上述json，并使用$scope来推送html表上的数据。 Angular js代码：

  function DashboardTablesPageCtrl($scope,$http,$timeout) {


$scope.tableData = [];
$scope.myFilter = ""

  var req = {
    method: 'POST',
    url: 'https://'+ACCOUNTNAME+'.cloudant.com/_session',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: 'name='+APIKEY+'&password='+APIPASSWORD,
    withCredentials: true
  }


 $http(req).then(function(result){
        //Grab data
        req = {
          method: 'GET',
          url: 'https://'+ACCOUNTNAME+'.cloudant.com/'+DATABASE+'/_all_docs',
          withCredentials: true
        }
        var i = 0;

        $timeout(function(){
        $http(req).then(function(result){
            for(i=0;i<result.data.total_rows;i++){
                var id = result.data.rows[i].id

                $http.get('https://'+ACCOUNTNAME+'.cloudant.com/'+DATABASE+'/'+id).then(function(data){
                    var data = data.data

                        angular.forEach(data.data[0].appDetails, function(appDetail, index) {
                        angular.forEach(appDetail.appDescription, function(appDescription, index){
                            $scope.tableData.push(appDescription);

                        });
                    });

                })

    }       
  },
  function(){
    console.log("Failed at grabbing data");
  });
}, 
function(){
  console.log('Failed at authenticating');
});

});}})();

我在html tablebody中使用了ng-repeat来显示如下数据：

<tbody>
<tr ng-repeat="item in tableData | filter: myFilter ">
  <td>{{item.appName}}</td>
  <td>{{item.GitTag}}</td>
  <td>{{item.blocker}}</td>
  <td>{{item.critical}}</td>
  <td>{{item.major}}</td>
  <td>{{item.minor}}</td>
  <td>{{item.UnitTestsTotal}}</td>
  <td>{{item.FailedTests}}</td>
  <td>{{item.CodeCoverage}}</td>      
</tr>
</tbody>

这将显示不同行中的所有数据。我需要对App X，App Y和App Z的所有数据进行分组，并且只显示三行，并且单击App X应该通过展开同一个表中的行来显示App X的数据。

我无法实现这一点，因为我只为表中的每个数据获取不同的行。请帮我实现这个目标。

1 个答案:

答案 0 :(得分：1)

当用户点击带有应用名称的行时，想法是显示和隐藏给定应用名称的行。 可以通过仅包含应用程序名称的行（单击它们）和按应用程序名称筛选的行来实现：

  <tr><td colspan="10" ng-click=swapExpandingX()>App X</td></tr>
  <tr ng-show="expandX" ng-repeat="item in tableData | filter: { appName: 'App X'}">
    <td>{{item.appName}}</td>
    <td>{{item.GitTag}}</td>
    ...
    <td>{{item.CodeCoverage}}</td>
  </tr>

  <tr><td colspan="10" ng-click=swapExpandingY()>App Y</td></tr>
  <tr ng-show="expandY" ng-repeat="item in tableData | filter: { appName: 'App Y'}">
    <td>{{item.appName}}</td>
    <td>{{item.GitTag}}</td>
    ...
    <td>{{item.CodeCoverage}}</td>
  </tr>

在控制器中调用交换功能点击：

  $scope.expandX = false;

  $scope.swapExpandingX = function() {
      $scope.expandX = !$scope.expandX;
  }

请参阅下面的代码段中的工作原理。

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.expandX = false;
  $scope.expandY = false;

  $scope.swapExpandingX = function() {
      $scope.expandX = !$scope.expandX;
  }
  
  $scope.swapExpandingY = function() {
      $scope.expandY = !$scope.expandY;
  }

  $scope.tableData = [{
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.25",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.24",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.23",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Y",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.1",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Y",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.2",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Z",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.0.0",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Z",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.0.1",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    }
  ]
}
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tbody>
      <tr><td colspan="10" ng-click=swapExpandingX()>App X</td></tr>
      <tr ng-show="expandX" ng-repeat="item in tableData | filter: { appName: 'App X'}">
        <td>{{item.appName}}</td>
        <td>{{item.GitTag}}</td>
        <td>{{item.blocker}}</td>
        <td>{{item.critical}}</td>
        <td>{{item.major}}</td>
        <td>{{item.minor}}</td>
        <td>{{item.UnitTestsTotal}}</td>
        <td>{{item.FailedTests}}</td>
        <td>{{item.CodeCoverage}}</td>
      </tr>
      
      <tr><td colspan="10" ng-click=swapExpandingY()>App Y</td></tr>
      <tr ng-show="expandY" ng-repeat="item in tableData | filter: { appName: 'App Y'}">
        <td>{{item.appName}}</td>
        <td>{{item.GitTag}}</td>
        <td>{{item.blocker}}</td>
        <td>{{item.critical}}</td>
        <td>{{item.major}}</td>
        <td>{{item.minor}}</td>
        <td>{{item.UnitTestsTotal}}</td>
        <td>{{item.FailedTests}}</td>
        <td>{{item.CodeCoverage}}</td>
      </tr>
    </tbody>
  </table>
</div>

删除代码重复

好的，它有效。现在我们可以通过删除html和controller中的代码重复来改进这段代码。

让我们将appNames存储在数组appNames中。你可以硬编码

$scope.appNames = ["App X", "App Y", "App Z"];

或从tableData

以动态方式检索它 
$scope.appNames = Array.from(new Set($scope.tableData.map(a => a.appName)));

如果应该扩展给定应用名称的行，我们将需要结构来存储信息。让我们创建地图expanding并将每个应用名称的false值设置为关键字。

$scope.expanding = {};
for (index = 0; index < $scope.appNames.length; index++) {
  $scope.expanding[$scope.appNames[index]] = false;
 }

现在我们可以使用没有重复的HTML：

  <table>
    <tbody ng-repeat="name in appNames">
      <tr>
        <td colspan="10" ng-click=swapExpanding(name)>{{name}}</td>
      </tr>
      <tr ng-show="expanding[name]" ng-repeat="item in tableData | filter: { appName: name}">
        <td>{{item.appName}}</td>
        <td>{{item.GitTag}}</td>
        ...
        <td>{{item.CodeCoverage}}</td>
      </tr>
    </tbody>
  </table>

和简单的交换功能：

$scope.swapExpanding = function(name) {
  $scope.expanding[name] = !$scope.expanding[name];
}

请参阅下面的代码段中的工作原理。

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

  $scope.tableData = [{
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.25",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.24",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App X",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.23",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Y",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.1",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Y",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.1.2",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Z",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.0.0",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    },
    {
      "appName": "App Z",
      "timeStamp": "",
      "GitTag": "RELEASE-1.0.0.1",
      "blocker": "3",
      "critical": "4",
      "major": "30",
      "minor": "2",
      "UnitTestsTotal": "59",
      "FailedTests": "0",
      "CodeCoverage": "90"
    }
  ]

  $scope.appNames = Array.from(new Set($scope.tableData.map(a => a.appName)));;

  $scope.expanding = {};
  for (index = 0; index < $scope.appNames.length; index++) {
    $scope.expanding[$scope.appNames[index]] = false;
  }

  $scope.swapExpanding = function(name) {
    $scope.expanding[name] = !$scope.expanding[name];
  }

}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <table>
    <tbody ng-repeat="name in appNames">
      <tr>
        <td colspan="10" ng-click=swapExpanding(name)>{{name}}</td>
      </tr>
      <tr ng-show="expanding[name]" ng-repeat="item in tableData | filter: { appName: name}">
        <td>{{item.appName}}</td>
        <td>{{item.GitTag}}</td>
        <td>{{item.blocker}}</td>
        <td>{{item.critical}}</td>
        <td>{{item.major}}</td>
        <td>{{item.minor}}</td>
        <td>{{item.UnitTestsTotal}}</td>
        <td>{{item.FailedTests}}</td>
        <td>{{item.CodeCoverage}}</td>
      </tr>
    </tbody>
  </table>
</div>

相关问题
最新问题