Question

尝试显示某些字段，最好是在表格（标题，行和列）中显示。并寻找最佳方式在Json Feed中查找字段。我尝试使用控制器查找字段，然后将该数据传递给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>

Answer 1

}中有额外的$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

Answer 2

也许};太多了？

自动缩进通常会使这些错误显而易见。

Answer 3

我可能错了，但是你试图直接读取json数据而不解析它？ MDN JSON.parse()

如果您在http://jsfiddle.net之类的内容上传代码，那就太好了这样人们可以测试它。

Answer 4

您是否尝试使用ng-model =“...”，它为您提供了覆盖属性或显示属性的机会。您可以尝试使用

<input type="number" ng-model="someID" disabled="disabled">

如果你在该字段上需要readOnly，则禁用

*。并看看它是如何工作的，也许它可以帮助你。问候

在Angular JS中将Json数据从Controller传递到View以构建表

4 个答案: