angular 动态遍历数组中的字典

问题描述：生成一个表格，表头信息存放在$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)不然不起作用
    }
})

参考：https://blog.csdn.net/oucqsy/article/details/76178140        这篇里是用directive遍历，我这里用起来不合适