如何使用ng-repeat渲染Ruby后端返回的JSON数组数据？

这完全没问题，ng-repeat就是AngularJS专门用来循环渲染数组数据的核心指令，刚好能解决你硬编码视图的痛点。我给你拆解一下具体实现步骤，照着来就行：

第一步：把后端Ruby的JSON数据传到前端控制器 #

首先得确保后端的business_integrations数据能被前端的IntegrationCtrl拿到，常见的两种方式：

方式1：通过API接口异步获取 #

如果你的后端提供了API接口（比如/api/business_integrations），那在控制器里用$http请求数据：

angular.module('yourAppName').controller('IntegrationCtrl', function($scope, $http) {
  // 发起GET请求获取集成数据
  $http.get('/api/business_integrations')
    .success(function(data) {
      // 把数据绑定到$scope，供视图使用
      $scope.integrations = data;
    })
    .error(function(err) {
      console.error('加载集成数据失败:', err);
    });
});

方式2：直接嵌入到页面（适合服务端渲染场景） #

如果是用Ruby on Rails的ERB模板，可以直接把JSON数据注入到页面全局变量，再让控制器读取：

<!-- 在你的HTML模板里（比如application.html.erb）添加 -->
<script>
  window.integrationData = <%= @business_integrations.to_json.html_safe %>;
</script>

然后控制器里直接赋值：

angular.module('yourAppName').controller('IntegrationCtrl', function($scope) {
  $scope.integrations = window.integrationData;
});

第二步：在视图里用ng-repeat循环渲染 #

把原来硬编码的内容替换成ng-repeat指令，比如假设你的JSON数据结构是这样的：

[
  {"id": 1, "name": "Slack集成", "description": "同步消息到Slack", "is_active": true},
  {"id": 2, "name": "GitHub集成", "description": "自动同步代码提交", "is_active": false}
]

那视图可以这么写：

<!-- 确保外层已经关联了IntegrationCtrl -->
<div ng-controller="IntegrationCtrl">
  <!-- 可选：添加加载状态提示 -->
  <div ng-show="!integrations">正在加载集成数据...</div>

  <!-- 用ng-repeat遍历数组，track by提升性能 -->
  <div ng-repeat="integration in integrations track by integration.id" class="integration-card">
    <h4>{{ integration.name }}</h4>
    <p>{{ integration.description }}</p>
    <span class="status" ng-class="{'active': integration.is_active}">
      {{ integration.is_active ? '已激活' : '未启用' }}
    </span>
    <!-- 可以根据你的JSON字段添加更多内容，比如链接、图标等 -->
  </div>
</div>

几个关键注意点 #

• 字段名要对应：视图里用的integration.name、integration.description必须和后端返回的JSON字段名完全一致，别写错大小写或者拼写。
• 添加track by：加上track by integration.id能提升性能，避免AngularJS重复渲染相同元素，尤其是数组有更新的时候。
• 处理异步加载：如果用$http异步获取数据，记得加加载状态提示，避免页面一开始是空的让用户困惑。

这样改完之后，后端的business_integrations数组有任何变化，前端视图都会自动更新，再也不用手动硬编码啦！

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