1

按照docs.angularjs.org 上的教程，第 2 步。如何将此数组更新为嵌套数组？

这是基本数组：

'use strict';

/* Controllers */

function PhoneListCtrl($scope){
    $scope.phones = [

        {"name" : "Samsung Galaxy S4",
        "snippet" : "Operativsystem : Android 4.2.2"
        }
    ]
}

这说明了我想要做的事情：

'use strict';

/* Controllers */

function PhoneListCtrl($scope){
    $scope.phones = [

        {"name" : "Samsung Galaxy S4",
            "snippet" : {"Operativsystem" : "Android 4.2.2",
                            "Skärm" : "4,99 tum",
                            "CPU" : "Quad-core",
                            "Kamera, bak" : "13 MP",
                            "Kamera, fram" : "1,9 MP",
                            "Övrigt" : "Närfältskommunikation (Eng. near field communication, NFC)"
                            }
        }
    ]
}

我当前的 HTML 模板：

<body ng-controller ="PhoneListCtrl">

<h1>The future of mobile devices</h1>

  <ul>
  <li ng-repeat="phone in phones">
  <h3>{{phone.name}}</h3>
  <p>{{phone.snippet}}</p>
</li>
</ul>

 <p>Total number of phones: 2</p>
</body>

我看到我可以{{phone.snippet.Operativsystem}}用来获取第一个元素。但我也希望在 HTML 中打印标签Operativsystem ，如下所示：

  • 操作系统：Android 4.2.2
  • 斯卡姆：4,99 tum
  • CPU：四核
  • 相机，bak：13 MP 相机，帧：1,9 MP
  • Övrigt: Närfältskommunikation（英语近场通信，NFC）

我意识到我可以像下面那样做，但这仍然不会在 HTML 中打印“属性名称/键”，只有值

  <ul>
    <li ng-repeat="phone in phones">
    <h3>{{phone.name}}</h3>
    <ul>
        <li ng-repeat="key in phone.snippet">
            {{key}}
        </li>
    </ul>
    <p>{{phone.snippet}}</p>
</li>
</ul>
4

3 回答 3

1

你可以筑巢ng-repeat

<ul>
  <li ng-repeat="phone in phones">
    <h3>{{phone.name}}</h3>
    <p ng-repeat="(key, value) in phone.snippet">{{key}}:{{value}}</p>
  </li>
</ul>

见http://plnkr.co/edit/GpFY0u?p=preview

于 2013-09-26T08:02:16.180 回答
0

试试这个：- http://jsfiddle.net/aiioo7/DgWnK/1/

HTML:-

<body ng-app ng-controller="PhoneListCtrl">

<h1>The future of mobile devices</h1>

    <ul>
        <li ng-repeat="phone in phones">
             <h3>{{phone.name}}</h3>

            <ul>
                <li>{{phone.snippet.Operativsystem}}</li>
                <li>{{phone.snippet.Skarm}}</li>
                <li>{{phone.snippet.CPU}}</li>
                <li>{{phone.snippet.Kamerabak}}</li>
                <li>{{phone.snippet.Kamerafram}}</li>
                <li>{{phone.snippet.Ovrigt}}</li>
            </ul>
        </li>
    </ul>
    <p>Total number of phones: 2</p>
</body>

JS：-

'use strict';

/* Controllers */

function PhoneListCtrl($scope) {
    $scope.phones = [

    {
        "name": "Samsung Galaxy S4",
            "snippet": {
            "Operativsystem": "Android 4.2.2",
                "Skarm": "4,99 tum",
                "CPU": "Quad-core",
                "Kamerabak": "13 MP",
                "Kamerafram": "1,9 MP",
                "Ovrigt": "Närfältskommunikation (Eng. near field communication, NFC)"
        }
    }]
}
于 2013-09-26T07:52:41.137 回答
0

请试试这个它会工作

在 HTML 中

 <body ng-app ng-controller="PhoneListCtrl">

  <h1>The future of mobile devices</h1>

<ul>
    <li ng-repeat="phone in phones">
         <h3>{{phone.name}}</h3>

        <ul>
             <li ng-repeat="sn in phone.snippet">
                 {{sn.name}} : {{sn.value}}
            </li>
        </ul>
    </li>
</ul>
<p>Total number of phones: 2</p>
</body>

JS

      'use strict';

    /* Controllers */

  function PhoneListCtrl($scope) {
$scope.phones = [

{
    "name": "Samsung Galaxy S4",            
    "snippet": [{"name":"Operativsystem","value":"Android 4.2.2"},
                {"name":"Skarm","value":"4,99 tum"},
                {"name":"CPU","value":"Quad-core"},
                {"name":"Kamerabak","value":"13 MP"},
                {"name":"Kamerafram","value":"1,9 MP"},
                {"name":"Ovrigt","value":"Närfältskommunikation (Eng. near field communication, NFC)"}]

    }
]

}

请检查小提琴 http://jsfiddle.net/DgWnK/6/

于 2013-09-26T09:26:04.487 回答