页面上json的角度显示值

Question

If my json looks something like this 如果我的json看起来像这样

    contactsCtrl.accounts = [
        {
            "id":"7363h33",
            "name":"Red Name",
            "addresses":[
                {
                    "id":"fhdydrtd-2348",
                    "line1":null,
                    "line2":null,
                    "town":null,
                    "county":null,
                    "zipcode":"AL6 TG8"
                }
            ],
            "packages":[
                {
                    "accountId":"234234",
                    "id":"345345-sehwer-wer"

                }
            ],

And in my html 而在我的HTML

    {{account.name}}

give me the correct name, and 给我正确的名字，然后

    {{account.packages}}

shows me json for packages. 向我显示json的软件包。 How can I get just the id in packages. 我如何只获取包中的ID。 I'v tried 我试过了

    {{account.packages.id}}

Answer 1

I use {{accounts.packages[0]?.id}} to make sure it finds the right value. 我使用{{accounts.packages[0]?.id}}来确保找到正确的值。 Without the ? 没有? , the html will error as it doesn't usually like having [] ，则html会出错，因为它通常不喜欢使用[]

Answer 2

DEMO 演示

 var app = angular.module("myApp", []); app.controller("MyCtrl", function($scope) { $scope.accounts = [ { "id": "7363h33", "name": "Red Name", "addresses": [ { "id": "fhdydrtd-2348", "line1": null, "line2": null, "town": null, "county": null, "zipcode": "AL6 TG8" } ], "packages": [ { "accountId": "234234", "id": "345345-sehwer-wer" } ] } ]; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div ng-repeat="x in accounts"> <span>{{ x.name }}</span> <div ng-repeat="package in x.packages"> <span>{{package.id}} </span> </div> </div> </div>

Answer 3

You can do an ng-repeat over packages, 您可以对软件包进行ng-repeat，

 <div ng-repeat="x in accounts">
    <h1>{{ x.name }}</h1>
    <h1>{{ x.phonenumber }}</h1>
     <div ng-repeat="package in x.packages">
     <h2>{{package.id}} </h2>
     </div
  </div>

DEMO 演示

 var app = angular.module("myApp", []); app.controller("AccountsController", function($scope) { $scope.accounts = [ { "id": "7363h33", "name": "Red Name", "addresses": [ { "id": "fhdydrtd-2348", "line1": null, "line2": null, "town": null, "county": null, "zipcode": "AL6 TG8" } ], "packages": [ { "accountId": "234234", "id": "345345-sehwer-wer" } ] } ]; });

 <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body ng-app="myApp" ng-controller="AccountsController"> <table> <div ng-repeat="x in accounts"> <h1>{{ x.name }}</h1> <h1>{{ x.phonenumber }}</h1> <div ng-repeat="package in x.packages"> <h2>{{package.id}} </h2> </div </div> </table> </body> </html>

页面上json的角度显示值

问题描述

3 个解决方案

解决方案1
0 2017-05-10 10:44:48

解决方案2
0 2017-05-11 05:19:01

解决方案3
-1 2017-05-10 10:46:33

页面上json的角度显示值

问题描述

3 个解决方案

解决方案1 0 2017-05-10 10:44:48

解决方案2 0 2017-05-11 05:19:01

解决方案3 -1 2017-05-10 10:46:33

解决方案1
0 2017-05-10 10:44:48

解决方案2
0 2017-05-11 05:19:01

解决方案3
-1 2017-05-10 10:46:33