使用ng-repeat返回属性列表（AngularJS）

Question

I am trying to convert a working JavaScript/Jquery feature to AngularJS (1.0) so I can add it to a fairly large AngularJS application. 我正在尝试将一个有效的JavaScript / Jquery功能转换为AngularJS（1.0），因此我可以将它添加到一个相当大的AngularJS应用程序中。 I am having some issues getting data to the view using ng-repeat and not sure where my issue is. 我有一些问题使用ng-repeat将数据输入到视图中，并且不确定我的问题在哪里。 I was reading through $index documentation and not sure if this is the source of my issue or what I need to do. 我正在阅读$index文档并且不确定这是否是我的问题的来源或我需要做什么。 Also not getting anything in the console for the response.data.deviceList object. 还没有得到在控制台的任何response.data.deviceList对象。

Possible I have a few issues going on here. 可能我在这里遇到了一些问题。

HTML 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 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 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

You are declaring the controller inside the ng-repeat (which is incorrect, you need only one controller instance for handling the entire collection, and not one (controller) instance for every element in the collection), so change 您在ng-repeat中声明控制器（这是不正确的，您只需要一个控制器实例来处理整个集合，而不需要集合中每个元素的一个（控制器）实例），所以更改

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

to <div ng-app="mainApp" ng-controller="mainScripts"> 到 <div ng-app="mainApp" ng-controller="mainScripts">

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

to this <div class="tile draggable" ng-repeat="stuff in titles"> 此 <div class="tile draggable" ng-repeat="stuff in titles">

Also, you misplaced the error callback...see below working sample (mocked data) 此外，您错误地放置了错误回调...请参阅下面的工作示例（模拟数据）

 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>

使用ng-repeat返回属性列表（AngularJS）

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-07-19 22:08:39

使用ng-repeat返回属性列表（AngularJS）

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-07-19 22:08:39

解决方案1
3 已采纳 2018-07-19 22:08:39