Question

我有一个对象，里面有不同的对象，这里是对象的一个例子

{  
   "0":{  
      "name":{  
         "type":"unchanged",
         "data":"HV010BSML"
      },
      "colour":{  
         "type":"unchanged",
         "data":"BLACK"
      },
      "size":{  
         "type":"unchanged",
         "data":"SML"
      },
      "qty":{  
         "type":"unchanged",
         "data":1
      },
      "localimg":{  
         "type":"unchanged",
         "data":"/data/New%20Products/HV010%20Black%20with%20pocket%20WM-700x700.jpg"
      },
      "sml":{  
         "type":"unchanged",
         "data":"2"
      },
      "stock":{  
         "type":"unchanged",
         "data":"78"
      },
      "id":{  
         "type":"unchanged",
         "data":"153"
      },
      "name2":{  
         "type":"unchanged",
         "data":"HV010"
      }
   },
   "1":{  
      "type":"created",
      "data":{  
         "name":"HV001YSML",
         "colour":"YELLOW",
         "size":"SML",
         "qty":1,
         "localimg":"/data/HV001-HV-VEST-YLW-700x700.jpg",
         "sml":"1",
         "stock":"424",
         "id":"8",
         "name2":"HV001"
      }
   }
}

我想知道是否可以使用ng-repeat迭代这些中的每一个，因为它是对象中的一个对象？我已经创建了一个带有ng-repeat的表，并在＆＃34;更改＆＃34;我想做另一个重复（使用我上面显示的对象），但当我尝试在html中显示数据时，它只是打印数组的每个字母。我基本上试图通过对象[0]来重复并以可读的格式显示它，例如＆＃34; HV010BSML没有改变＆＃34;

这是我的HTML：

 <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">

                <div class="ibox-content">
                    <table datatable="ng" dt-options="dtOptions"  class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <th>User</th>
                            <th>Date</th>
                            <th>Change</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="(oIndex, o) in orderdata">
                            <td>{{o.user}}</td>
                            <td>{{o.date}}</td>
                            <td> <div ng-repeat="d in formatdata(findhistory(oIndex)) track by $index">{{d}}</div></td>
                        </tr>
                        </tbody>
                    </table>


                </div>
            </div>
        </div>
    </div>

在控制器中，findhistory只返回我显示的对象，formatdata是控制器中的这个函数

$scope.formatdata=function(obj){
    try{
    if(obj[0]){
        console.log(JSON.stringify(obj[0]));
return JSON.stringify(obj[0]);
}
else{
    return;
}
}
catch(ex){}
}

Answer 1

迭代对象属性

可以让ngRepeat迭代一个属性   使用以下语法对象：
<div ng-repeat="(key, value) in myObj"> ... </div>
但是，与数组迭代相比，存在一些限制：



JavaScript规范没有定义为对象返回的键的顺序，因此AngularJS依赖于返回的顺序   在myObj中运行key时的浏览器。浏览器通常如下   按照它们的顺序提供密钥的策略   定义，虽然删除密钥时有例外   恢复。有关详细信息，请参阅删除的MDN页面。



ngRepeat会默默忽略以$开头的对象键，因为它是AngularJS用于公共（$）和私有（$$）的前缀   属性。



内置过滤器orderBy和filter不能与对象一起使用，如果与对象一起使用会抛出错误。



如果您遇到任何这些限制，建议使用   解决方法是将对象转换为排序的数组   在将其提供给ngRepeat之前您喜欢的顺序。你可以   使用toArrayFilter等过滤器执行此操作或实现$ watch   对象你自己。

从Angularjs API reference

中提取

就我个人而言，我认为您可以从数据源的一点变化中受益，而不是将所有内容放在一起的对象，使用内部具有类似对象的集合。它更容易理解，并且对ngRepeat有更好的支持。

这样的事情怎么样：

[  
   {
      "id": "0",
      "data": [
         {
            "property": "name",
            "type":"unchanged",
            "data":"HV010BSML"
         },
         {
            "property": "colour",
            "type":"unchanged",
            "data":"BLACK"
         },
         {
            "property": "size",
            "type":"unchanged",
            "data":"SML"
         },
         {
            "property": "qty",
            "type":"unchanged",
            "data":1
         },
         {
            "property": "localimg",
            "type":"unchanged",
            "data":"/data/New%20Products/HV010%20Black%20with%20pocket%20WM-700x700.jpg"
         },
         {
            "property": "sml",
            "type":"unchanged",
            "data":"2"
         },
         {
            "property": "stock",
            "type":"unchanged",
            "data":"78"
         },
         {
            "property": "id",
            "type":"unchanged",
            "data":"153"
         },
         {
            "property": "name2",
            "type":"unchanged",
            "data":"HV010"
         }
      ]
   },
   {  
      "id": "1"
      "data": [
         {
            "type":"created",
            "data":{  
               "name":"HV001YSML",
               "colour":"YELLOW",
               "size":"SML",
               "qty":1,
               "localimg":"/data/HV001-HV-VEST-YLW-700x700.jpg",
               "sml":"1",
               "stock":"424",
               "id":"8",
               "name2":"HV001"
            }
         }
      ]
   }
]

角度ng-repeat通过多级对象

1 个答案: