You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

AngularJS ng-repeat仅显示最后一条循环数据问题求助

解决ng-repeat仅显示最后一条循环结果的问题

你遇到的核心问题是数组初始化和赋值逻辑错误,导致最终绑定到$scope.test2的不是包含所有符合条件数据的数组,而是单个值(或嵌套数组),所以ng-repeat无法正确遍历所有结果。我们一步步来修正:

错误分析

  1. 初始代码的覆盖问题:
    你一开始声明了chartResultTemp = [],但循环里却用chartResultTemp = mydata.data.substring(6,9);直接把数组替换成了单个字符串,每次循环都会覆盖之前的值,最后$scope.test2只会保留最后一次循环的结果,自然ng-repeat只能显示这一个值。

  2. push时报错的原因:
    尝试$scope.test2.push(chartResultTemp)时,因为$scope.test2从未被初始化为数组,所以会抛出Cannot read property 'push' of undefined的错误。

  3. 多余括号的问题:
    后来改成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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.28 07:07:47