使用 ng-repeat同步数据库中请求的数据

Synchronizing requested data from database with ng-repeat

本文关键字：请求 数据 数据库 ng-repeat 同步 使用      更新时间：2023-09-26

集合的每个文档都有一个"room"属性。我正在尝试显示集合中的每个房间以及与每个房间相关的植物数量。结果将是"房间 1,6 植物;房间2,2植物;等等。第一个 http 请求成功地从 "plantList" 集合中的所有文档中获取一个 "room" 值，并将其显示在 index.html 中。在ng-repeat的每次迭代中，它将播放"房间1"，"房间2"等。然后，我使用该值作为 url 参数在 "getplantbyroom" http 请求中传递，如果我在控制台中登录它，它会为我提供所需的信息 - 它会告诉我每个房间中的植物数量。问题是当我在 $scope.count 中显示响应时，计数都是一样的——它们都反映了请求的最后一个房间——这显然是不正确的，也不是控制台中显示的结果。所以我认为问题是 ng-repeat 在"植物"数组中生成对象的速度比 http 请求能够从数据库返回数据的速度更快。因此，所有 $scope.count 都变成了上次迭代中调用的任何内容。我可能离得很远。 问：有没有办法将数据库中的传入数据绑定到 ng-repeat 指令的每次迭代中？或者，让每次迭代都等待从数据库/请求加载数据，然后再进行下一次迭代？几天来我一直在寻找解决方案，但我发现似乎没有解决这个看似简单的问题。

服务器.js 

MongoClient.connect(process.env.MONGOLAB_URI, function(err, db) {
    var plantList = db.collection("plantList");
app.get('/getrooms', function(req, res) {
       plantList
           .distinct("room", function(err, docs) {
           res.json(docs);
       });
    });
app.get('/getplantsbyroom/:room', function(req, res) {
        var roomReq = req.params.room;
        plantList.count({"room":roomReq}, function(err, count) {
            res.json(count);
        });
    });
});

控制器.js

$http.get('/getrooms').success(function (response) {
            $scope.rooms = response;
        });
$scope.plantCount = function(room) {
        var url = '/getplantsbyroom/' + room;
        $http.get(url).success(function (response) {
            $scope.count = response;
    };

索引.html

<div ng-repeat="room in rooms"  ng-init="plantCount(room)">
            <p>{{room}}</p>
            <p>{{count}} Plants</p>

如何添加 Id 和每个div 的索引

<div ng-repeat="room in rooms" id="{{'room'+$index}}"  ng-init="plantCount(room,$index)">

然后，在将$index传递给函数后，您应该能够指定哪个div 调用此 ajax，计数应该是数组中房间对象的一部分，$index应该是该数组中对象的$index.....

你只有一个 $scope.count 变量，你总是把它设置为相同的响应值(最后一个重复的项目(。您应该将其绑定到房间对象，

$http.get('/getrooms').success(function (response) {
        $scope.rooms = response.map(function(i){return i.name:i});
    });
$scope.plantCount = function(room) {
        var url = '/getplantsbyroom/' + room;
        $http.get(url).success(function (response) {
            room.count = response;
    };
<div ng-repeat="room in rooms"  ng-init="plantCount(room)">
        <p>{{room.name}}</p>
        <p>{{room.count}} Plants</p>

或者，您可以通过为房间创建指令来创建隔离范围(该指令将具有自己的 $scope.count(

相关文章：