Angularjs 在ngRepeat中显示动态内容

努力在

ngRepeat

中显示动态内容。当需要显示我的承诺内容时，我得到了一个空对象

{}

：

<div ng-controller="DemoCtrl">
    <div class="sidebar" ng-repeat="row in rows">
        <div class="row">
            <input type="checkbox">
            <div class="name">{{row.name}}</div>
            <div class="title">{{map[$index]}}</div>
        </div>
    </div>
</div>

{{row.name}
{{map[$index]}

以及控制器：

 function DemoCtrl($scope, $http, $q) {
    const rows = function() {
        const rows = [];

        for (let i = 0; i < 12; i++) {
            rows.push({
                id: `demo-${i}`,
                name: `Demo ${i}`
            });
        }

        return rows;
    };

    $scope.rows = rows();
    $scope.map = [];

    // $scope.$watch($scope.map, function (oldValue, newValue) {
    //   console.log(oldValue, newValue);
    // });

    function _data() {
        // const promises = [];

        for (let i = 0; i < $scope.rows.length; i++) {
            var defer = $q.defer();

            $http.get(`https://jsonplaceholder.typicode.com/posts/${i + 1}`).then(function(post) {
                defer.resolve(`${post.data.title.substring(0, 10)}...`);
            });

            $scope.map.push(defer.promise);
            // promises.push(defer.promise);
        }

        // return $q.all(promises);
        return $q.all($scope.map);
    }

    function _init() {
        _data().then(function(data) {
            $scope.map = data; // why aren't we getting here?
        });
    };

    _init();
}

函数DemoCtrl（$scope，$http，$q）{
常量行=函数（）{
常量行=[]；
for（设i=0；i<12；i++）{
推({
id:`demo-${i}`，
名称：`Demo${i}`
});
}
返回行；
};
$scope.rows=rows（）；
$scope.map=[]；
//$scope.$watch（$scope.map，函数（oldValue，newValue）{
//console.log（oldValue、newValue）；
// });
函数_data（）{
//常量承诺=[]；
for（设i=0；i<$scope.rows.length；i++）{
var defer=$q.defer（）；
$http.get(`https://jsonplaceholder.typicode.com/posts/${i+1}`）。然后（函数（post）{
defer.resolve（`${post.data.title.substring（0，10）}…`）；
});
$scope.map.push（defer.promise）；
//承诺。推动（推迟。承诺）；
}
//返回$q.all（承诺）；
返回$q.all（$scope.map）；
}
函数_init（）{
_data（）。然后（函数（数据）{
$scope.map=data；//我们为什么不到这里？
});
};
_init（）；
}

普朗克：

我还修改了一些其他想法，比如在值更改后尝试在

$scope

对象上添加

$watch

，但我不相信这会有任何帮助。我有一些挥之不去的问题：

据我所知，您可以使用a，那么

ngRepeat

内部的这种变化是如何/为什么发生的呢

为什么我对

$q.all

的回调没有被调用

如果这不是正确的方法，是什么

---

在Angular中，您几乎不需要使用$q

您只需在每个$http.get之后填充一组帖子标题即可

function DemoCtrl($scope, $http) {
  const rows = function () {
    const rows = [];

    for (let i = 0; i < 12; i++) {
      rows.push({
        id: `demo-${i}`,
        name: `Demo ${i}`
      });
    }

    return rows;
  };

  $scope.rows = rows();
  $scope.map = [];

  function _init() {
    for (let i = 0; i < $scope.rows.length; i++) {

      $http.get(`https://jsonplaceholder.typicode.com/posts/${i + 1}`).then(function (post) {
        $scope.map.push(post.data.title);
      });
    }
  }

  _init();
}

函数DemoCtrl（$scope，$http）{
常量行=函数（）{
常量行=[]；
for（设i=0；i<12；i++）{
推({
id:`demo-${i}`，
名称：`Demo${i}`
});
}
返回行；
};
$scope.rows=rows（）；
$scope.map=[]；
函数_init（）{
for（设i=0；i<$scope.rows.length；i++）{
$http.get(`https://jsonplaceholder.typicode.com/posts/${i+1}`）。然后（函数（post）{
$scope.map.push（post.data.title）；
});
}
}
_init（）；
}

---

我认为您可以将

ng添加到
ng repeat
div和一个条件，即
rows.length>0
我知道
$q
很少需要，但在我的情况下，写得不好的遗留代码保证了这一点。谢谢你的解决方案