angular 动态遍历数组中的字典_angular 字典的遍历-优快云博客

本文链接：https://blog.youkuaiyun.com/remember_persistent/article/details/80801058

本文介绍了一种在Angular中更新复杂表头结构的方法。当通过弹窗修改表头信息后，原有的表头会消失，文章提供了解决方案，即利用$compile重新编译DOM来显示更新后的表头。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：生成一个表格，表头信息存放在$scope.options.theads里面，数据格式为

   [{ 
 
  'rows': [{ 
 
  'isedit': 
  ' 
  0 
  ', 
 
  'title': 
  'pubtime 
  ', 
 
  'iscombine': 
  ' 
  0 
  ', 
 
  'colspan': 
  1, 
 
  'rowspan': 
  1, 
 
  'field': 
  'xxx 
  ' 
 
   }, { 
 
  'isedit': 
  ' 
  0 
  ', 
 
  'title': 
  'transmit同比增长率', 
 
  'iscombine': 
  ' 
  0 
  ', 
 
  'colspan': 
  1, 
 
  'rowspan': 
  1, 
 
  'field': 
  'xxx' 
 
   }] 
 
   }, 
 
   {...}, 
 
   {...}, 
 
   {...}]

需求：需要修改表头，而页面遍历使用这样（对数组中的字典进行遍历，字典的value是一个数组）

<tr ng-repeat="(theadkeys,theadrows) in option.theads track by theadkeys">
    <th  ng-repeat="(theadkey,theadrow) in theadrows.rows track by theadkey" rowspan="{{ theadrow.rowspan }}" colspan="{{ theadrow.colspan }}">{{ theadrow.title }}</th>
</tr>

bug：用弹出框传值（angular.copy）修改了以后发现表头直接没有了，因为修改了options，字典(theadkey,theadrow) in theadrows.rows不会再自动遍历，表现的结果是表头直接没有了。

解决办法：

在弹出框的返回值里对那段遍历代码用$compile，

modelInstance.result.then(function (data) {
    if(data.type=='save'){
        $scope.option.theads[theadsCnt-1]=data.data;//我这里的表头不止一个所以用数组，但无关紧要
        htmlStr='<thead>\n' +
            '        <tr ng-repeat="(theadkeys,theadrows) in option.theads track by theadkeys">\n' +
            '              <th  ng-repeat="(theadkey,theadrow) in theadrows.rows track by theadkey" rowspan="{{ theadrow.rowspan }}" colspan="{{ theadrow.colspan }}">{{ theadrow.title }}</th>\n' +
            '        </tr>\n' +
            '    </thead>';
        $("#demodiv").find('thead').remove();
        $("#demodiv").prepend($compile(htmlStr)($scope));//这里必须要用$compile()($scope)不然不起作用
    }
})