Question

我有一个页面，我在按钮INSERT＆amp;上添加时间范围。 SAVE将数据发送到API并从响应集数据发送到表。但问题是，我的数据没有动态显示。我需要刷新页面来查看更改。我尝试使用$watch，但这不起作用或我做错了。这是我的plunker。

Answer 1

你犯了一些错误：

<div ng-controller="TimepickerDemoCtrl">没有包裹整件东西
ng-submit已更改为ng-click
，urbanTimeRange是数组，您应该使用$watchCollection 而不是$watch

查看更正后的variant。

Answer 2

thnx以@Slava Utesinov为起点。这是我如何做到这一点。首先，为了增加新的时间间隔，我在$http成功使用它。首先，我将新数据推送到$scope，然后在我$watch之后$scope进行更改

 $scope.urbanTimeRange.push(data);
 $scope.$watchCollection('urbanTimeRange', function (newValue, oldValue, scope) {
}, true);

此外，当我删除时间间隔时，我使用splice方法并在$watch之后进行更改。在这里，我们看到index，我从我的html中获取index，其中我使用$index跟踪ng-repeat中的所选项目。

这是控制器：

$scope.urbanTimeRange.splice(index, 1);
$scope.$watchCollection('urbanTimeRange', function (newValue, oldValue, scope) {
});

这是html

<tr ng-repeat='timeRange in urbanTimeRange track by $index'>
                            <td>{{timeRange.from_time | date:'shortTime'}}</td>
                            <td>{{timeRange.to_time | date:'shortTime'}}</td>
                            <td><angular-smartconfirm confirm="removeRow(timeRange.id, $index)"><i class="fa fa-close"></i></angular-smartconfirm></td>
                        </tr>

无需刷新即可在DOM中获取新数据

2 个答案: