AngularJS ng-repeat仅显示最后一条循环数据问题求助
你遇到的核心问题是数组初始化和赋值逻辑错误,导致最终绑定到$scope.test2的不是包含所有符合条件数据的数组,而是单个值(或嵌套数组),所以ng-repeat无法正确遍历所有结果。我们一步步来修正:
错误分析
初始代码的覆盖问题:
你一开始声明了chartResultTemp = [],但循环里却用chartResultTemp = mydata.data.substring(6,9);直接把数组替换成了单个字符串,每次循环都会覆盖之前的值,最后$scope.test2只会保留最后一次循环的结果,自然ng-repeat只能显示这一个值。push时报错的原因:
尝试$scope.test2.push(chartResultTemp)时,因为$scope.test2从未被初始化为数组,所以会抛出Cannot read property 'push' of undefined的错误。多余括号的问题:
后来改成chartResultTemp.push([mydata.data.substring(6,9)]),这是把一个数组push到chartResultTemp里,每个元素都是数组类型,前端显示时就会带上括号。
修正后的代码
控制器部分
先正确初始化数组,再在循环中把符合条件的字符串直接push进去,避免覆盖或嵌套数组:
/*global angular*/ var app = angular.module('statisticsApp', []).controller('myCtrl', function ($scope, $http) { "use strict"; return $http({ method : "POST", url : "GatewayAPI.php", }).then(function mySuccess(response) { $scope.records = response.data; // 1. 初始化要绑定到视图的数组 $scope.test2 = []; $scope.test3 = []; // 如果test3需要存储多个值,同样初始化数组 var i; var Result; var resultType; for(i=0; i<72;i++) { var mydata = $scope.records.data[i]; Result = mydata.data.substring(6,9); resultType = mydata.data.substring(3, 4); if(resultType === "A") { // 2. 把符合条件的字符串直接push到数组中 $scope.test2.push(Result); } // 如果test3需要存储所有resultType,也push进去 $scope.test3.push(resultType); console.log(Result); console.log(resultType); } $scope.gotTemp = false; $scope.gotHumidity = false; $scope.getSoilMoisture = false; }); });
前端部分
你的前端代码无需修改,保持原ng-repeat即可,现在$scope.test2是包含所有符合条件字符串的数组:
<ul> <li data-ng-repeat="cd in test2">{{cd}}</li> </ul>
关键修正点总结
- 必须提前初始化要绑定到
$scope的数组(比如$scope.test2 = []),否则无法使用push方法。 - 循环中不要用赋值语句(
=)覆盖数组,而是用push方法向数组中添加元素。 - 不要把数组作为元素push进去,直接push需要的字符串即可,避免前端显示多余括号。
这样修改后,ng-repeat就能遍历$scope.test2中的所有元素,显示所有符合条件的结果了。
内容的提问来源于stack exchange,提问作者Daine MacTavish

