Question

我有一个包含动态内容的对象，例如：

$scope.test = [
{
   "name" : "device1",
   "params" : [{"freq1" : "144"},{"freq2" : "160"}]

},
{
   "name" : "device2",
   "params" : [{"freq3" : "144"}]

}]

我使用ng-repeat来显示内容：

<li ng-repeat="(key,value) in test">{{key}}:{{value}}<li>

但我如何使用params的键值？

<li ng-repeat="(k,v) in test.params">{{k}}:{{v}}<li>

不起作用： - （

http://jsfiddle.net/nofear87/kyGa3/1/

编辑：

$scope.test = [
{
   "name" : "device1",
   "params" : [{"freq1" : "144"},{"freq2" : "160"}],
   "category" : "test-category"

},
{
   "name" : "device2",
   "params" : [{"freq3" : "144"}],
   "vendor" : "intel"

}]

Answer 1

您必须添加另一级ng-repeat来迭代显示test.params＆＃39;个人钥匙和价值观 - 这里是你小提琴的修改版本：

<ul>
    <li ng-repeat="(key, value) in test">
        {{value.name}}
        <ul ng-repeat="(k, v) in value.params">
            <li ng-repeat="(paramKey, paramVal) in v">{{paramKey}} -&gt; {{paramVal}}</li>
        </ul>
    </li>
<ul>

这将输出：

DEVICE1
- freq1 - ＆gt; 144
- freq2 - ＆gt; 160
装置2
- freq3 - ＆gt; 144

另请注意，您的小提琴缺少方括号以将$scope.test转换为数组

Answer 2

从模板调用函数。
的 HTML：

<tr ng-repeat="(key, value) in device"> <td><strong>{{key}}</strong></td> <td>{{val(value)}}</td> </tr>

<强> JS

$scope.val = function(value) { if(typeof value == 'string') {return value} else if(typeof value == "object") { var values=""; value.forEach(function(val,index){ if(val.name) {values+=val.name} else if(val.freq) {values+=val.freq+", "} else if(val.maxFreq) {values+=val.maxFreq+", "} }); return values; } }

Answer 3

像这样的东西

http://jsfiddle.net/kyGa3/2/

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

<table class="table">
    <tbody>
        <tr ng-repeat="(key, value) in device">
            <td><strong>{{key}}</strong></td>
            <td>{{value}}</td>
        </tr>
        <div ng-repeat="item in device.params">
            <div ng-repeat="(k, v) in item">
                <strong>{{ k }}</strong>
                {{ v }}
            </div>
        </div>
    </tbody>
</table>

</body>

device.params是数组......

如何动态显示＆＃34;嵌套＆＃34;具有ng-repeat的对象

3 个答案: