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

我有一个页面，我在其中添加时间范围，在按钮上插入并保存发送数据到API，从响应集数据到表。但问题是，我的数据并没有动态显示。我需要刷新页面以查看更改。我尝试使用

$watch

，但这不起作用，或者我做错了什么。这是我的。你犯了一些错误：

没有包装整个东西

ng提交

已更改为

ng点击

由于

urbantimerage

是数组，您应该使用

$watchCollection

而不是

$watch

---

请看已更正的。

您犯了一些错误：

没有包装整个东西

ng提交

已更改为

ng点击

由于

urbantimerage

是数组，您应该使用

$watchCollection

而不是

$watch

---

查看已更正的。thnx至@Slava Utesinov作为起点。我是这样做的。 首先，为了添加新的时间间隔，我在

$http

success中使用它。首先，我将新数据推送到

$scope

，然后，我将

$watch

此

$scope

进行更改

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

另外，当我删除时间间隔时，我使用

splice

方法和

$watch

之后进行更改。在这里我们看到

索引

，我从我的html中获得

索引

，在这里我用

$index

在ng中重复跟踪所选项目

这是控制器：

$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>

{{timeRange.from{u time}日期：'shortTime'}
{{timeRange.to_time}日期：'shortTime'}

thnx到@Slava Utesinov作为起点。我是这样做的。 首先，为了添加新的时间间隔，我在

$http

success中使用它。首先，我将新数据推送到

$scope

，然后，我将

$watch

此

$scope

进行更改

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

另外，当我删除时间间隔时，我使用

splice

方法和

$watch

之后进行更改。在这里我们看到

索引

，我从我的html中获得

索引

，在这里我用

$index

在ng中重复跟踪所选项目

这是控制器：

$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>

{{timeRange.from{u time}日期：'shortTime'}
{{timeRange.to_time}日期：'shortTime'}

thnx，但这是我的错误，因为我使用了工作引导plnkr并添加了代码，在我的代码中，这工作正常，但我对$watch有问题。在“插入”按钮上，我将数据发送到服务器，在响应DOM未更新时，我需要刷新视图，刷新后，新数据将显示在这里。我需要即时更新域您在哪里向

urbantimerage

添加新元素？由于您没有更改，

$watch

在单击“插入”按钮“向服务器发送数据”后未被激活，我使用factory调用此链接并设置数据$scope.urbanConfig=$scope.urbanConfig.screen\u间隔；此代码在您的plunk中不存在，您也应该使用

$watchCollection

而不是

$watch

。现在存在。。。sry。。。我不知道这是否重要，但这是我的错误，因为我使用工作引导plnkr并添加代码，在我的代码中这工作正常，但我对$watch有问题。在“插入”按钮上，我将数据发送到服务器，在响应DOM未更新时，我需要刷新视图，刷新后，新数据将显示在这里。我需要即时更新域您在哪里向

urbantimerage

添加新元素？由于您没有更改，

$watch

在单击“插入”按钮“向服务器发送数据”后未被激活，我使用factory调用此链接并设置数据$scope.urbanConfig=$scope.urbanConfig.screen\u间隔；此代码在您的plunk中不存在，您也应该使用

$watchCollection

而不是

$watch

。现在存在。。。sry。。。我不知道这是否重要