从 JSON 填充表中选择数据以打开隐藏的 div，包括 angularjs 中的相关 JSON 数据答案

【问题标题】：Select data from JSON populated table to open hidden div including related JSON data in angularjs从 JSON 填充表中选择数据以打开隐藏的 div，包括 angularjs 中的相关 JSON 数据
【发布时间】：2017-05-17 03:54:05
【问题描述】：

我正在尝试创建一个显示建筑物的单页应用程序（使用 ng-sho 和 ng-hide）。目前，我的代码如下所示

index.html

<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
  <script src="app.js"></script>
  <title>Happy Building Company</title>
</head>


<body ng-controller="MainCtrl">     
<!--BUILDING DIRECTORY-->
    <div id="directory" class="mainDiv" ng-show="buildingDirVisible">
    <form>
    <fieldset>
        <legend>Building Directory</legend>
        <div id="directoryTable" style="overflow-x:auto;">
            <table class="table table-responsive" id="dirtable">
        <tr>
          <th>Building ID</th>
          <th>Owner</th>
          <th>Address</th>
          <th>View</th>
        </tr>
        <tr class="rowHover" ng-repeat="item in buildings" >
          <td> {{item.ID}}</td>
          <td> {{item.Owner}}</td>
          <td> {{item.Address}}</td>
          <td> <button type="button" value="View Building" ng-click="viewBuilding()">View Building</button></td>
        </tr>
    </table>
    </div>

app.js

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

app.controller('MainCtrl', function($scope, $http) {
$scope.name = 'Happy Building Company';

$scope.buildings = null;
$scope.target1 = '/building_dir.json';

$scope.building = $http.get($scope.target1)
.then(
  function successCall(response) {
    $scope.buildings = response.data.buildings;
  },
  function errorCall(response) {
    $scope.feedback = "Error reading building directory";
    $scope.buildings = null; 
  }
);

//View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
$scope.viewbuilding = function(){
  $scope.buildingDirVisible = false;
  $scope.buildingFormVisible = true; // Building form visible
};

building_dir.json

{"buildings":[{"ID":"123",
               "Owner":"Joe Doe",
               "Address":"20 Lambton Quay",
               "BuildingType":null,
               "ConstructionDate":"0001-01-01T00:00:00"
              },
              {"ID":"222",
               "Owner":"John Smith",
               "Address":"20 Dixon Street",
               "BuildingType":null,
               "ConstructionDate":"0001-01-01T00:00:00"
              }]}

我试图拥有它，以便当您在建筑目录中的表中选择查看建筑时，buildingDirVisible div 被隐藏并打开另一个 div，显示仅与该建筑 ID 相关的信息（即，建筑 ID 222 的建筑类型和建设日期）。目前，我的应用程序使用 show 和 hide 在 div 之间切换，但不显示数据特定的详细信息。我的理解是，我必须开发一个 for 循环来遍历 JSON 文件，然后显示与建筑物 ID 匹配的建筑物。我对 angular js 比较陌生，所以任何帮助都将不胜感激！谢谢！！

【问题讨论】：

标签： html angularjs json

【解决方案1】：

根据您的代码审查的一些观察结果 ：

$scope.viewbuilding = function() { ... } 应该是 $scope.viewBuilding = function() { ... }，因为我们正在触发 viewBuilding 而不是 viewbuilding。
具有buildingFormVisible 的 Div 在您要显示特定于您从表中选择的建筑物 ID 的数据的视图中不可用。

你的方法是正确的！！

您可以循环遍历建筑物 JSON，然后显示与建筑物 ID 匹配的建筑物。

对于这种方法，您可以将Array.filter() 方法与ES6 箭头运算符一起使用。

演示

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

myApp.controller('MyCtrl', function($scope) {
    $scope.buildingDirVisible = true;
    $scope.buildingFormVisible = false;
    $scope.buildings = [{"ID":"123",
               "Owner":"Joe Doe",
               "Address":"20 Lambton Quay",
               "BuildingType":null,
               "ConstructionDate":"0001-01-01T00:00:00"
              },
              {"ID":"222",
               "Owner":"John Smith",
               "Address":"20 Dixon Street",
               "BuildingType":null,
               "ConstructionDate":"0001-01-01T00:00:00"
              }];
              
    //View Building - NEED TO WORK OUT HOW TO SPECIFY TO A BUILDING
	$scope.viewBuilding = function(itemID) {
    $scope.buildingDirVisible = false;
    $scope.buildingFormVisible = true; // Building form visible
    var record = $scope.buildings.filter(item => { return item.ID == itemID });
    $scope.buildingDetail = record[0];
  };          
});

table,tr,th,td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
   <table class="table table-responsive" id="dirtable" ng-show="buildingDirVisible">
        <tr>
          <th>Building ID</th>
          <th>Owner</th>
          <th>Address</th>
          <th>View</th>
        </tr>
        <tr class="rowHover" ng-repeat="item in buildings" >
          <td> {{item.ID}}</td>
          <td> {{item.Owner}}</td>
          <td> {{item.Address}}</td>
          <td> <button type="button" value="View Building" ng-click="viewBuilding(item.ID)">View Building</button></td>
        </tr>
    </table>
    <div ng-show="buildingFormVisible">
      <p>Building ID : {{buildingDetail.ID}}</p>
      <p>Building ID : {{buildingDetail.Owner}}</p>
      <p>Building ID : {{buildingDetail.Address}}</p>
      <p>Building ID : {{buildingDetail.ConstructionDate}}</p>
    </div>
</div>

【讨论】：

谢谢！这完美地显示了数据。如果我想添加一个返回按钮，那么就像在我的 HTML 中添加然后使用 $ scope.viewBuilding = function(itemID) { $scope.buildingDirVisible = true; $scope.buildingFormVisible = false;} 在我的 app.js 中？
@EmmaO'Neill 请将其标记为正确，以便对其他用户也有用。