Question

我正在学习angularjs。到目前为止，我已经设法在单个控制器中使用标准ng-repeat指令填充表。我正在使用存储在github上的JSON文件。结果

但是，我有一个问题。 JSON文件有15个对象（？），每个对象有14个属性。

json根据JSONlint有效。 json的片段在

之下

[
    {
        "Room_ID": "1",
        "OldRoom": "room1oldname",
        "NewRoom": "room1newname",
        "floor": "First Floor",
        "facilities": "Y",
        "NoSeats": "4",
        "PC": "1",
        "flipchart": "N",
        "conferencePhone": "N",
        "phone": "Y",
        "whiteboard": "N",
        "projector": "N",
        "waterFountain": "N",
        "NoOfProjectorScreens": "0"
    },
    {
        "Room_ID": "2",
        "OldRoom": "Room2Oldname",
        "NewRoom": "Room2Newname",
        "floor": "First Floor",
        "facilities": "N",
        "NoSeats": "4",
        "PC": "0",
        "flipchart": "N",
        "conferencePhone": "N",
        "phone": "N",
        "whiteboard": "N",
        "projector": "N",
        "waterFountain": "N",
        "NoOfProjectorScreens": "0"
    }
]

最初看起来所有名称都包含空格的项目都没有被退回。例如，“喷泉”没有返回，但“白板”是。我更改了所有条目以删除空格并重新检查json的有效性，但没有骰子。

我尝试从各种样本apis返回数据，除了这个特殊的json源之外没有任何问题。

我也尝试过x的$ index，但不确定我是否正确执行了这个操作，或者我需要的是什么，因为JSON中的每个条目都有自己唯一的ID。

我认为它必须与JSON本身有关，否则不会从此文件或任何其他源文件返回其他结果。

我目前获得15行数据（每个房间1个），但有些列是空白的。

我只是这样做了一个星期，如果我的某些语义不正确，我会道歉。

感谢您的时间。

长时间潜伏，新时间提问者

编辑：嗨，为延迟道歉。我不能添加一个plunker，因为我不知道如何使用它。但我只使用两个文件，所以我将在下面发布代码。

Index.html和controller.js

Controller.js代码

angular
.module("roomviewer", [])

.controller("MainController", function($scope, $http) {


var onUserComplete = function(response){
    $scope.user = response.data;
};

var onError = function(reason){
    $scope.error = "oh no";
};


    $http.get("https://gist.githubusercontent.com/cnrowland/78f5d20bd175028e1051/raw/42246133908e126f2c53303d97a10fff9d43ff07/roomMaster.json")
.then(onUserComplete, onError);

});

Index.html代码

<!DOCTYPE html>
<html lang="en" data-ng-app="roomviewer">
<head>
<meta charset="utf-8">
<title>Room Viewer</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">    
<script type="text/javascript" src="assets/js/jquery-2.1.4.min.js">     </script>
<script type="text/javascript" src="assets/js/bootstrap.min.js">   </script>


<script type="text/javascript" src="assets/js/angular.min.js"></script>
<script type="text/javascript" src="assets/js/controller.js"></script>



</head>
<body data-ng-controller = "MainController">
<nav class="navbar navbar-default"role="navigation">
   <div class="navbar-header">
       <button type="button" class="navbar-toggle"
         data-toggle="collapse" data-target="#nav-toggle">
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
           <span class="icon-bar"></span>
 </button>
       <a class="navbar-brand" href="/">Room Viewer</a>
</div>
<div class="collapse navbar-collapse" id="nav-toggle">
    <ul class="nav navbar-nav">
        <li class="active"><a href="/">See All Rooms</a></li>
        <li><a href="/add">Filter Rooms</a></li>
    </ul>
    <form class="navbar-form navbar-right" role="search">
        <input type="text" class="form-control"
        placeholder="Search">
    </form>
</div>
</nav>

<table>
    <thead>
      <tr>
          <th>Room ID</th>
          <th>New Room</th>
          <th>Old Room</th>
          <th>Location</th>
          <th>Facilities</th>
          <th>No of PCs</th>
          <th>Flipchart</th>
          <th>Conference Phone</th>
          <th>Telephone</th>
          <th>Whiteboard</th>
          <th>Water Fountain</th>
          <th>Projector</th>
          <th>No. of Projector Screens</th>
        </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in user" track by $user.Room_ID>
          <th>{{user.Room_ID}}</th>
          <th>{{user.NewRoom}}</th>
          <th>{{user.OldRoom}}</th>
          <th>{{user.floor}}</th>
          <th>{{user.facilities}}</th>
          <th>{{user.PC}}</th>
          <th>{{user.flipchart}}</th>
          <th>{{user.conferencePhone}}</th>
          <th>{{user.phone}}</th>
          <th>{{user.whiteboard}}</th>
          <th>{{user.waterFountain}}</th>
          <th>{{user.projector}}</th>
          <th>{{user.NoOfProjectorScreens}}</th>
        </tr>
    </tbody>

</table>


</div>


</body>

</html>

并非所有JSON条目都以ng-repeat

0 个答案: