使用ng-repeat创建多个红色文本块时页面空白的技术求助

你的代码页面空白的核心问题是指令挂载层级错误：ng-app（Angular应用入口）和ng-controller（控制器挂载）不能放在带有ng-repeat的元素上。Angular需要先完成应用和控制器的初始化，才能识别并执行ng-repeat依赖的数据源，层级颠倒会导致循环逻辑根本无法触发。

修复后的完整代码 #

<html>
  <body ng-app="myApp" ng-controller="myCtrl">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
      .card-main {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background-color: red;
        margin: 5px; /* 避免块元素重叠 */
        color: white; /* 红色背景下文字设为白色更易读 */
      }
    </style>
    <div class="card-main" ng-repeat="x in type">
      <p>{{x}}</p> 
    </div>
    <script>
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope) {
        $scope.type = ["Any", "T1", "T2", "T3"];
        $scope.state = ["Any", "S1", "S2"];
      });
    </script>
  </body>
</html>

关键改动说明 #

• 将ng-app="myApp"和ng-controller="myCtrl"移到<body>标签上，确保Angular先完成应用与控制器的初始化，让ng-repeat能正常访问$scope.type的数据源。
• 额外添加margin和color样式优化视觉效果（可选，但提升页面体验）。

内容的提问来源于stack exchange，提问作者Arpan