要在AngularJS中使用ng-repeat来遍历一个映射(对象),并实时更新DOM,可以使用以下方法:
HTML代码:
{{key}}: {{value}}
JavaScript代码:
angular.module('myApp', [])
.controller('myController', function($scope, $interval) {
$scope.myMap = {};
// 模拟从服务器获取更新的映射数据
function fetchUpdatedMap() {
// 假设从服务器获取到了更新的映射数据
var updatedMap = {
key1: 'value1',
key2: 'value2',
key3: 'value3'
};
// 更新$scope上的映射数据
$scope.myMap = updatedMap;
}
// 每隔一段时间从服务器获取更新的映射数据
$interval(fetchUpdatedMap, 5000);
});
在上述代码中,我们首先在HTML中使用ng-repeat指令来遍历myMap对象,并显示每个键值对的内容。
然后,在JavaScript中,我们定义了一个控制器myController,并注入了$scope和$interval服务。$scope.myMap被初始化为空对象。
我们使用$interval服务来每隔5秒钟调用一次fetchUpdatedMap函数。在fetchUpdatedMap函数中,我们模拟从服务器获取更新的映射数据,并将其赋值给$scope.myMap。
由于$scope.myMap被绑定到HTML中的ng-repeat指令,每当$scope.myMap更新时,ng-repeat会自动更新DOM,显示最新的映射数据。
这样,我们就实现了通过ng-repeat遍历一个映射(对象),并实时更新DOM的功能。