问题描述:生成一个表格,表头信息存放在$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遍历,我这里用起来不合适