Question

我在尝试使用ng-repeat来演练我的JSON响应时遇到问题，我是AngularJS的新手，所以我确定它是一个新手的错误:)。我想让ng-repeat通过ns0:AttributeDetails，ns0:Attributes。这是JSON数据：

{"ns0:GetAgentProfile.Response": {
"xmlns:ns0": "http://URL",
"ns1:Header":    {
    "xmlns:ns1": "http://URL",
    "xmlns:ns7": "http://URL",
    "ns1:Source": null,
    "ns1:CreatedDateTime": "2014-03-24T09:34:28.339-05:00",
    "ns1:MessageType": "Request",
    "ns1:MessageId": null
},
"ns0:ProfileDetails":    {
    "ns0:UserIdentifier":       {
        "ns0:UserGUID": "2BCF0074-392F-4653-8733-02063C2DBC5C",
        "ns0:UserName": "Username01"
    },
    "ns0:AttributeDetails": {"ns0:Attribute":       [
        {
            "ns0:Name": "AgentLogin",
            "ns0:Value": ["Username01"]
        },
        {
            "ns0:Name": "FullName",
            "ns0:Value": ["Name, User"]
        },
        {
            "ns0:Name": "LanguageSpoken",
            "ns0:Value": ["English|Chinese"]
        },
        {"ns0:Name": "Supervisor"},
        {
            "ns0:Name": "Region",
            "ns0:Value": ["Region01"]
        },
        {
            "ns0:Name": "Country",
            "ns0:Value": ["CO"]
        },
        {
            "ns0:Name": "ClientAccessGroup",
            "ns0:Value": ["CountryMobileCCR"]
        },
        {"ns0:Name": "Roles"}
    ]},

这是HTML：

<!DOCTYPE html>
<html ng-app="auth" xmlns="http://www.w3.org/1999/html">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="js/bootstrap.js"></script>
<script src="js/angular.js"></script>
<script src="js/authorization.js"></script>
</head>
<body ng-controller="MainCtrl">
<div>
    <div class="container-fluid">
        <form class="well">
            <label>Username:</label>
            <input><br><br>
        <button ng-click="getData()" class="btn btn-primary">Submit</button>
        <button ng-click="clearData()" class="btn btn-danger">Reset</button>
        </form>
    </div>
    <h1>Response from Service:</h1>
    <!-- <pre>{{data | json}}</pre> -->
    <pre>
    Username: {{data['ns0:GetAgentProfile.Response']['ns0:ProfileDetails']   ['ns0:UserIdentifier']['ns0:UserName']}} <br>
    Profile Details</pre>
    <div ng-repeat="Attribute in data">{{ data['ns0:GetAgentProfile.Response']['ns0:ProfileDetails']['ns0:AttributeDetails']['ns0:Attribute']['ns0:Name'] }}</div>
    </div>
  </html>

以下是控制器获取数据的JS：

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

app.factory('authService', function($http) {
var promise;
var authService = {
    async: function() {
        if ( !promise ) {

            promise = $http.get('package.json').then(function (response) {
            console.log(response);
            return response.data;
            });
        }
        return promise;
    }
};
return authService;
});

app.controller('MainCtrl', function( authService,$scope) {
  $scope.clearData = function() {
    $scope.data = {};
};
$scope.getData = function() {
    authService.async().then(function(d) {
        $scope.data = d;
    });
};
});

我再次为新手问题道歉。非常感谢任何帮助。

Answer 1

在repeat指令中深入查看数组：

<div ng-repeat="Attribute in data.ns0:GetAgentProfile.Response.ns0:ProfileDetails.ns0:AttributeDetails.ns0:Attribute">

现在你可以这样做：

{{Attribute.ns0:Name}} and {{Attribute.ns0:Value}}

不确定:是否会很好地发挥作用，可能不得不逃避这些。

ng-repeat使用JSON中的数组

1 个答案: