如何使用 Angular 正确实现 post答案

【问题标题】：How to implement post correctly with Angular如何使用 Angular 正确实现 post
【发布时间】：2016-07-01 14:43:02
【问题描述】：

我已经在下面发布了我的代码以及我想要显示的 JSON 数据。具体来说，我希望能够做到{{client.label}} 并将客户列在一个列表中。不幸的是，唯一有效的是当我做{{client}} 时，它给了我整个 JSON 对象，这是我不想要的。我是 Angular 的新手，我知道我显然做错了什么，但我不太确定是什么。任何帮助表示赞赏！

<body ng-controller="myController">
  <ul>
    <li ng-repeat="client in userData">
      {{client.label}}
    </li>
  </ul>
  <script>
    var app = angular.module('myApp', []);
    app.controller("myController", function ($scope, $http) {
      $http({
        url: 'myURL/blah/blah',
        method: 'POST',
        data: {
          common: { clientName: '6012' },
          qualifier: '$ALL.$ALL.$ALL.$ALL.$ALL',
          pattern: 'configs\\..*'
        },
        headers: { 'Content-Type': 'application/json' }
      }).success(function(data) {
        $scope.userData = data;
      });
    });
  </script>
</body>

{
  "data": {  
    "parameters": [  
      {  
        "qualifier": "$ALL.$ALL.$ALL.$ALL.$ALL",
        "key": "themes",
        "value": {  
          "amairlines": {  
            "id": "amairlines",
            "label": "American Airlines"
          },
          "amazonfork": {  
            "id": "amazonfork",
            "label": "Amazon Fork"
          },
          "bestbuy": {  
            "id": "bestbuy",
            "label": "Best Buy"
          },
          "botw": {  
            "id": "botw",
            "label": "Bank of the West"
          },
          "bbva": {  
            "id": "bbva",
            "label": "BBVA"
          },
          "redleaf": {  
            "id": "redleaf",
            "label": "Red Leaf"
          },
          "citi": {  
            "id": "citi",
            "label": "Citi"
          },
          "costco": {  
            "id": "costco",
            "label": "Costco"
          },
          "firstcitizens": {  
            "id": "firstcitizens",
            "label": "First Citizens"
          },
          "publix": {  
            "id": "publix",
            "label": "Publix"
          },
          "homedepot":{  
            "id": "homedepot",
            "label": "Home Depot"
          },
          "hsbc": {  
            "id":"hsbc",
            "label": "HSBC"
          },
          "huntington": {  
            "id": "huntington",
            "label": "Huntington"
          },
          "kohls": {  
            "id": "kohls",
            "label": "Kohls"
          },
          "nordstrom": {  
            "id": "nordstrom",
            "label": "Nordstrom"
          },
          "paypal": {  
            "id": "paypal",
            "label": "PayPal"
          },
          "primax": {  
            "id": "primax",
            "label": "Primax"
          },
          "td": {  
            "id": "td",
            "label": "Toronto Dominion"
          },
          "usaa": {  
             "id": "usaa",
             "label": "USAA"
          }
        }
      }
    ]
  }
}

【问题讨论】：

在 HTML 中使用 ng-repeat 来遍历列表。

标签： javascript arrays json angularjs http-post

【解决方案1】：

将 ng-repeat 更改为：

<li ng-repeat="client in userData.parameters[0].value">
  {{client.label}}
</li>

【讨论】：

谢谢！按我的意愿工作，我会尽快接受这个答案

【解决方案2】：

您要迭代的数据不是返回的数据，而是更深的数据。你应该改变 $scope = data; 到 $scope = data.parameters[0].value; 或者改变它的重调方式。

还有一点，通常最好通过集中式服务来处理数据。

【讨论】：