如何用MongoDB（无Mongoose）与AngularJS通过ng-repeat渲染对象数组数据？

嗨，我来一步步帮你搞定这个需求！不用Mongoose的话，咱们就用原生MongoDB驱动处理数据，再配合AngularJS的ng-repeat完成渲染，下面是具体实现步骤：

1. 服务器端：返回MongoDB查询到的对象数组 #

假设你用Node.js+Express做后端，这里用原生MongoDB驱动查询数据并返回JSON格式的数组：

const express = require('express');
const { MongoClient } = require('mongodb');
const app = express();
const port = 3000;

// MongoDB连接字符串（替换成你的实际配置）
const mongoUrl = 'mongodb://localhost:27017';
const dbName = 'yourDatabaseName';
const collectionName = 'yourCollectionName';

// 接口：获取文章数据
app.get('/api/articles', async (req, res) => {
  try {
    const client = await MongoClient.connect(mongoUrl);
    const db = client.db(dbName);
    // 查询所有文档并转成数组
    const articles = await db.collection(collectionName).find({}).toArray(); 
    res.json(articles); // 返回JSON数组
    client.close();
  } catch (err) {
    console.error('查询数据出错:', err);
    res.status(500).json({ error: '获取数据失败' });
  }
});

app.listen(port, () => {
  console.log(`服务器运行在 http://localhost:${port}`);
});

2. AngularJS控制器：请求数据并绑定到$scope #

在你的AngularJS应用里，创建控制器，用$http服务请求后端接口，把返回的文章数组绑定到作用域：

// 初始化AngularJS模块
var app = angular.module('articleApp', []);

// 文章控制器
app.controller('ArticleController', ['$scope', '$http', function($scope, $http) {
  // 初始化文章数组
  $scope.articles = [];

  // 请求服务器数据
  $http.get('http://localhost:3000/api/articles')
    .then(function(response) {
      // 请求成功，把返回的数组赋值给$scope.articles
      $scope.articles = response.data;
      console.log('获取到的文章数据:', $scope.articles);
    }, function(error) {
      // 请求失败，打印错误信息
      console.error('请求数据失败:', error);
    });
}]);

3. 前端HTML：用ng-repeat渲染到div中 #

在页面里引入AngularJS脚本，然后通过ng-repeat遍历articles数组，把每个文章的内容渲染到div里：

<!DOCTYPE html>
<html ng-app="articleApp">
<head>
  <title>文章列表</title>
  <!-- 引入AngularJS -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <!-- 引入你的控制器脚本 -->
  <script src="app.js"></script>
</head>
<body ng-controller="ArticleController">
  <!-- 用ng-repeat遍历文章数组 -->
  <div ng-repeat="article in articles track by article._id" class="article-item">
    <h3>{{article.title}}</h3>
    <p>{{article.content}}</p>
    <p class="author">作者: {{article.author}}</p>
    <hr>
  </div>

  <!-- 当没有数据时显示提示 -->
  <div ng-if="articles.length === 0">暂无文章数据</div>
</body>
</html>

几个关键注意点 #

• track by的作用：MongoDB返回的每个文档都有唯一的_id，用track by article._id可以避免ng-repeat遇到重复数据时报错，也能提升渲染性能。如果你的文档没有_id（一般不会），可以用track by $index。
• 跨域问题：如果前端和后端运行在不同端口/域名，需要在Express后端配置CORS，比如安装cors包并启用：

  const cors = require('cors');
  app.use(cors());
  

• 数据格式校验：确保服务器返回的是数组类型，可以在控制器里打印response.data确认格式是否正确。
• AngularJS版本：示例用的是1.8.2版本，其他版本语法基本一致，注意$http的回调是基于Promise的.then()方法。

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