Return 使用 ng-repeat 的属性列表 (AngularJS)

Question

我正在尝试将可用的 JavaScript/Jquery 功能转换为 AngularJS (1.0)，以便我可以将其添加到相当大的 AngularJS 应用程序中。我在使用 ng-repeat 将数据获取到视图时遇到一些问题，并且不确定我的问题出在哪里。我正在阅读 $index 文档，但不确定这是否是我的问题的根源或我需要做什么。在 response.data.deviceList 对象的控制台中也没有得到任何东西。

可能我遇到了一些问题。

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Building Layout - Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="interact.js"></script>
<script src="angular.min.js"></script>
<script src="mainScripts.js"></script>
</head>

<body>

<div ng-app="mainApp">
<div class="tile draggable" ng-controller="mainScripts" ng-repeat="stuff in titles">
    <ul>
        <li>{{stuff.location}}</li>
        <li>{{stuff.description}}</li>
    </ul>

</div>
</div>

</body>
</html>

JavaScript

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

mainApp.controller('mainScripts', function($scope, $http) {

$http.get('devices.json').then(function successCallback(response){
    console.log("API call works!");

    console.dir(response.data.deviceList);

var titles = response.data.deviceList;

});

}, function errorCallback(response) {
    console.log("API call doesn't work");

});

JSON

{
"deviceTypes": [{
    "description": "Air Handler",
    "typeName": "AirSource"
}, {
    "description": "VAV Terminal",
    "typeName": "AirTerminal"
}, {
    "description": "Fan Coil",
    "typeName": "ChilledWaterTerminal"
}, {
    "description": "Chiller",
    "typeName": "ChilledWaterSource"
}, {
    "description": "Generic Unit",
    "typeName": "NoResources"
}, {
    "description": "Other Source",
    "typeName": "OtherSource"
}, {
    "description": "Other Terminal",
    "typeName": "OtherTerminal"
}, {
    "description": "Water Manager",
    "typeName": "WaterSource"
}, {
    "description": "WSHP Terminal",
    "typeName": "WaterTerminal"
}],
"deviceList": [{
    "href": "../MISRest/devices/3101117",
    "location": "Loc Desk 3 VAV",
    "description": "VAV 117",
    "objectName": "VAV 117",
    "instance": "3101117",
    "occupancy": "Occupied",
    "schedule": "Standard Schedule",
    "ignore": "False",
    "commStatus": "None",
    "alarmStatus": "None",
    "macaddress": "117",
    "directSchedule": "True",
    "rogueZone": "False",
    "parentID": {
        "air": "0"
    },
    "deviceType": ["AirTerminal"]
}, {
    "href": "../MISRest/devices/3101121",
    "location": "Loc Desk 4 with temp VAV",
    "description": "VAV 121",
    "objectName": "VAV Actuator Series 2 Bacnet ASC Controller",
    "instance": "3101121",
    "occupancy": "Error",
    "schedule": "Standard Schedule",
    "ignore": "False",
    "commStatus": "Fault",
    "alarmStatus": "Active",
    "macaddress": "121",
    "directSchedule": "True",
    "rogueZone": "False",
    "parentID": {
        "air": "0"
    },
    "deviceType": ["AirTerminal"]
}, {
    "href": "../MISRest/devices/3101004",
    "location": "New Paris",
    "description": "KMC Device",
    "objectName": "BAC-8205_001635",
    "instance": "3101004",
    "occupancy": "Error",
    "schedule": "Standard Schedule",
    "ignore": "False",
    "commStatus": "None",
    "alarmStatus": "None",
    "macaddress": "4",
    "directSchedule": "True",
    "rogueZone": "False",
    "deviceType": ["NoResources"]
}, {
    "href": "../MISRest/devices/3101013",
    "location": "Default Location",
    "description": "VAV-013",
    "objectName": "DEFAULT",
    "instance": "3101013",
    "occupancy": "Occupied",
    "schedule": "None",
    "ignore": "False",
    "commStatus": "None",
    "alarmStatus": "None",
    "macaddress": "13",
    "directSchedule": "True",
    "rogueZone": "False",
    "parentID": {
        "air": "0"
    },
    "deviceType": ["AirTerminal"]
}, {
    "href": "../MISRest/devices/3101066",
    "location": "Loc Desk AHU (1st)",
    "description": "Desk AHU 066 (2nd)",
    "objectName": "POL904_015413",
    "instance": "3101066",
    "occupancy": "Occupied",
    "schedule": "None",
    "ignore": "False",
    "commStatus": "None",
    "alarmStatus": "Active",
    "macaddress": "66",
    "directSchedule": "False",
    "rogueZone": "False",
    "deviceType": ["AirSource"]
}]
}

Answer 1

您在 ng-repeat 中声明了控制器（这是不正确的，您只需要一个控制器实例来处理整个集合，而不需要一个（控制器）实例来处理集合中的每个元素），所以变化

这个 <div ng-app="mainApp">

至 <div ng-app="mainApp" ng-controller="mainScripts">

和这个 <div class="tile draggable" ng-controller="mainScripts" ng-repeat="stuff in titles">

到这个<div class="tile draggable" ng-repeat="stuff in titles">

此外，您放错了错误回调...请参阅下面的工作示例（模拟数据）

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

mainApp.controller('mainScripts', function($scope, $http) {

  var data = {
    "deviceTypes": [{
      "description": "Air Handler",
      "typeName": "AirSource"
    }, {
      "description": "VAV Terminal",
      "typeName": "AirTerminal"
    }, {
      "description": "Fan Coil",
      "typeName": "ChilledWaterTerminal"
    }, {
      "description": "Chiller",
      "typeName": "ChilledWaterSource"
    }, {
      "description": "Generic Unit",
      "typeName": "NoResources"
    }, {
      "description": "Other Source",
      "typeName": "OtherSource"
    }, {
      "description": "Other Terminal",
      "typeName": "OtherTerminal"
    }, {
      "description": "Water Manager",
      "typeName": "WaterSource"
    }, {
      "description": "WSHP Terminal",
      "typeName": "WaterTerminal"
    }],
    "deviceList": [{
      "href": "../MISRest/devices/3101117",
      "location": "Loc Desk 3 VAV",
      "description": "VAV 117",
      "objectName": "VAV 117",
      "instance": "3101117",
      "occupancy": "Occupied",
      "schedule": "Standard Schedule",
      "ignore": "False",
      "commStatus": "None",
      "alarmStatus": "None",
      "macaddress": "117",
      "directSchedule": "True",
      "rogueZone": "False",
      "parentID": {
        "air": "0"
      },
      "deviceType": ["AirTerminal"]
    }, {
      "href": "../MISRest/devices/3101121",
      "location": "Loc Desk 4 with temp VAV",
      "description": "VAV 121",
      "objectName": "VAV Actuator Series 2 Bacnet ASC Controller",
      "instance": "3101121",
      "occupancy": "Error",
      "schedule": "Standard Schedule",
      "ignore": "False",
      "commStatus": "Fault",
      "alarmStatus": "Active",
      "macaddress": "121",
      "directSchedule": "True",
      "rogueZone": "False",
      "parentID": {
        "air": "0"
      },
      "deviceType": ["AirTerminal"]
    }, {
      "href": "../MISRest/devices/3101004",
      "location": "New Paris",
      "description": "KMC Device",
      "objectName": "BAC-8205_001635",
      "instance": "3101004",
      "occupancy": "Error",
      "schedule": "Standard Schedule",
      "ignore": "False",
      "commStatus": "None",
      "alarmStatus": "None",
      "macaddress": "4",
      "directSchedule": "True",
      "rogueZone": "False",
      "deviceType": ["NoResources"]
    }, {
      "href": "../MISRest/devices/3101013",
      "location": "Default Location",
      "description": "VAV-013",
      "objectName": "DEFAULT",
      "instance": "3101013",
      "occupancy": "Occupied",
      "schedule": "None",
      "ignore": "False",
      "commStatus": "None",
      "alarmStatus": "None",
      "macaddress": "13",
      "directSchedule": "True",
      "rogueZone": "False",
      "parentID": {
        "air": "0"
      },
      "deviceType": ["AirTerminal"]
    }, {
      "href": "../MISRest/devices/3101066",
      "location": "Loc Desk AHU (1st)",
      "description": "Desk AHU 066 (2nd)",
      "objectName": "POL904_015413",
      "instance": "3101066",
      "occupancy": "Occupied",
      "schedule": "None",
      "ignore": "False",
      "commStatus": "None",
      "alarmStatus": "Active",
      "macaddress": "66",
      "directSchedule": "False",
      "rogueZone": "False",
      "deviceType": ["AirSource"]
    }]
  };

  $scope.titles = data.deviceList; // mocked, replace with real $http.get

/*
  // this is the correct way
  $http.get('devices.json').then(function successCallback(response) {
    console.log("API call works!");

    console.dir(response.data.deviceList);

    $scope.titles = response.data.deviceList;

  }, function errorCallback(response) { // error callback goes here
    console.log("API call doesn't work");
  });
  */

}); // <-- removed error call back from here

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="mainApp" ng-controller="mainScripts"> <!-- moved controller here! -->
  <div class="tile draggable" ng-repeat="stuff in titles"> <!-- removed controller from here -->
    <ul>
      <li>{{stuff.location}}</li>
      <li>{{stuff.description}}</li>
    </ul>

  </div>
</div>

Return 使用 ng-repeat 的属性列表 (AngularJS)

Return list of properties using ng-repeat (AngularJS)

javascript

angularjs

angularjs-ng-repeat

ng-controller