Angularjs-ng repeat不反映属性数组中的更改
Angularjs - ng-repeat does not reflect changes in property array
我的HTML有一个带有ng repeat:的循环
<div class="row">
<div ng-repeat="item in model.painel track by item.codigoIncidente">
<strong>{{item.restante.horaMinutoSegundo}}</strong>
</div>
</div>
我的控制器有一个$interval,它递减horaMinutoSegundo。
nihilApp.controller('IncidentePainelController', ['$scope', '$interval', 'Incidente', function ($scope, $interval, Incidente) {
$scope.model = {
painel: [],
};
var find = function() {
Incidente.listPainel({pagina: 0}).$promise.then(function (result) {
$scope.model.painel = result.pagedList;
$scope.model.totalItems = result.totalGeral;
}, function (error) {
console.log(error);
});
};
var updateTime = function() {
for (var i = 0; i < $scope.model.painel.length; i++) {
if ($scope.model.painel[i].status.id === 'E' && $scope.model.painel[i].restante.segundos > 0) {
var segundos = $scope.model.painel[i].restante.segundos - 1;
$scope.model.painel[i].restante.horaMinutoSegundo = getHoraMinutoSegundo(segundos);
}
}
};
var getHoraMinutoSegundo = function (segundos) {
var horaMath = Math.floor(segundos / 3600);
var remMath = Math.floor(segundos % 3600);
var minutoMath = Math.floor(remMath / 60);
var segundoMath = Math.floor(remMath % 60);
var hrStr = (horaMath < 10 ? "0" : "") + horaMath;
var mnStr = (minutoMath < 10 ? "0" : "") + minutoMath;
var secStr = (segundoMath < 10 ? "0" : "") + segundoMath;
return hrStr.concat(":").concat(mnStr).concat(":").concat(secStr);
};
$interval(updateTime, 1000);
find();
}]);
但是{{item.restante.horaMinutoSegundo}}不会在HTML中更新。有人能帮我解决这个问题吗?非常感谢!
https://jsfiddle.net/araraujo/96w3jrrh/
它应该可以工作,但您的代码中有一个小错误。
var segundos = $scope.model.painel[i].restante.segundos - 1;
您将新的segundos
值放入变量中,但没有更新作用域中的值。
这是更新版本的小提琴
有两件事你需要改变
-
在控制器中注入$interval
app.controller('MainCtrl',函数($scope,$interval){}
-
更新您的模型,使其与for循环中的逻辑匹配。下面是这样的。
$scope.model={painel:〔{restante:1}〕}
必须在末尾添加$scope.apply。
var updateTime = function() {
for (var i = 0; i < $scope.model.painel.length; i++) {
if ($scope.model.painel[i].status.id === 'E' && $scope.model.painel[i].restante.segundos > 0) {
var segundos = $scope.model.painel[i].restante.segundos - 1;
$scope.model.painel[i].restante.horaMinutoSegundo = getHoraMinutoSegundo(segundos);
}
}
$scope.apply();
};
发现缺口,更换此线
var segundos = $scope.model.painel[i].restante.segundos - 1;
带
scope.model.painel[i].restante.segundos = $scope.model.painel[i].restante.segundos - 1;
相关文章:
- 如何筛选对象的数组属性
- 如何在mongodb(mongose)中覆盖子文档的数组属性
- 如何按对象数组中的数组属性进行筛选
- 基于其他属性查询多维数组属性
- 循环访问 JS 数组 + 数组属性
- AngularJS:观察数组属性
- JSON对象中的数组属性通过foreach更新-更新所有键
- Javascript - 使用数组属性定义对象
- Ember.js with EmberFire Object - 如何使用数组属性
- 我无法访问由开发人员工具中可见的回调填充的 javascript 对象数组属性内容
- 设置对象数据结构数组属性
- 按子数组属性/值对 JavaScript 对象数组进行排序
- 对象的数组属性
- 如何访问 JavaScript 对象上的数组属性
- 使用 jQuery 深层复制对象数组属性值
- 访问并迭代模板内Kendo UI Listview的数组属性
- 主干模型数组属性更改和更改事件侦听器不总是启动
- 在json数组属性中循环
- 通过js中的数组属性方法进行迭代
- 无法清除主干模型数组属性