在Angular JS中将Json数据从Controller传递给View以建表
[英]Passing Json data from Controller to View in Angular JS to build a table
问题描述
试图显示某些字段，最好在表格中（标题、行和列）。 并寻找最佳方式在 Json 提要中查找字段。 我尝试使用控制器查找字段，然后将该数据传递给 HTML 中的视图。
关于 Json 的控制器有什么问题吗？ 字段为空。 似乎没有任何东西从控制器传递到视图？ 这是我尝试过的：
<!doctype html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<title>LIVE</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('DataCtrl', function ($scope, $http) {
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
}
};
$scope.elements = $scope.result.data.transactionList.map(function (res) {
var e = {};
e.transTypeId = res.transTypeId;
e.userId = res.userId;
e.storeId = res.storeId;
return e;
});
});
</script>
</head>
<body ng-controller="DataCtrl">
<h1>Live from the JSON feed</h1>
<ul>
<li ng-repeat="e in elements">
{{ e.transTypeId}}: {{ e.userId }}, {{ e.storeId }}
</li>
</ul>
</body>
</html>
4 个解决方案
解决方案1
2 已采纳 2016-01-20 22:51:32
您的$scope.result有一个额外的} 。 它应该是这样的：
$scope.result = {
"data": {
"transactionList": [{
"barcode": "52905819992681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "12Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}, {
"barcode": "52905819592681",
"training": 0,
"tranNo": 1,
"userId": "8796093054980",
"retailerId": "defaultRetailer",
"storeId": "23Store",
"deviceId": "afd03463-9ee7-45d4-9d2e-8d64a683f126",
"tillId": "2",
"tranTypeId": "regularSale",
"isTranVoid": 0,
"totalItems": 1,
"merchTotal": 50.0,
"promoTotal": 0.0
}]
}
};
// get rid of this};
这是工作plunkr
解决方案2
1 2016-01-20 22:26:08
也许一个}; 太多？
自动缩进通常会使这些类型的错误变得明显。
解决方案3
0 2016-01-20 22:21:40
我可能是错的，但您试图直接读取 json 数据而不解析它？
MDN JSON.parse()
如果您将代码上传到http://jsfiddle.net这样的网站上，人们也可以对其进行测试。
解决方案4
0 2016-01-20 22:31:47
您是否尝试过使用 ng-model="..."，它为您提供了覆盖属性或显示它的机会。 你可以试试
<input type="number" ng-model="someID" disabled="disabled">
*如果您需要在该字段上只读，则禁用。 看看它是如何工作的，也许它可以帮助你。 问候
使用Zend Controller for Angular JS渲染数据视图
[英]Rendering View with Data from Zend Controller for Angular JS
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.