2017-06-20 83 views
0

我有一个具有不同的对象内,这里的对象是对象的一个​​例子角纳克重复

{ 
    "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创建了一个表格,在“change”列中我想做另一个ng repeat(它使用上面显示的对象),但是当我尝试在html中显示数据时,它只是打印数组的每个字母。基本上,我想通过对象[0]以可读格式NG-重复,并显示诸如“HV010BSML是不变的”

这里是我的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){} 
} 

回答

0

遍历对象属性此功能

,能够得到ngRepeat遍历使用以下语法的一个 对象的属性:

<div ng-repeat="(key, value) in myObj"> ... </div> 

但是,也有一些限制相比阵列迭代:

  • 的JavaScript规范没有定义为一个对象返回的键的顺序,所以AngularJS依靠浏览器在myObj中为键运行时返回的顺序为 。浏览器通常遵循 提供密钥的策略,即按照 定义的顺序提供密钥,但在删除密钥和恢复 时有例外。有关更多信息,请参阅删除的MDN页面。

  • ngRepeat会默默地忽略以$开头的对象键,因为它是AngularJS用于public($)和private($$) 属性的前缀。

  • 内置过滤器orderBy和过滤器不能与对象一起使用,并且如果与一个对象一起使用,将会引发错误。

如果你打任何这些限制,建议 解决方法是你的对象转换成被分在 ,你将其提供给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" 
      } 
     } 
     ] 
    } 
]