Question

按照docs.angularjs.org, step 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 ，如下所示：

Operativsystem：Android 4.2.2
Skärm：4,99 tum
CPU：四核
Kamera，bak：13 MP Kamera，fram：1,9 MP
Övrigt：Närfältskommunikation（Eng.near field communication，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>

Answer 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

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/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)"
        }
    }]
}

Answer 3

请试试这个它会起作用

in 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/

如何在角度中创建嵌套数组

3 个答案:

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