在 ngRepeat 中显示动态内容

Question

难以在 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>

和控制器：

 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();
}

笨蛋在这里：https://plnkr.co/edit/2BMfIU97Moisir7BBPNc

我修改了一些其他想法，例如尝试在值更改后在 $scope 对象上添加 $watch，但我不相信这会有任何帮助。我有一些挥之不去的问题：

据我了解，您可以使用 promise inside a template 所以 how/why 这会在 ngRepeat 内发生变化吗？
为什么我的 $q.all 回调没有被调用？
如果这不是正确的方法，那是什么？

Answer 1

在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();
}

https://plnkr.co/edit/zOF4KNtAIFqoCOfinaMO?p=preview

在 ngRepeat 中显示动态内容

Showing dynamic content inside ngRepeat

ajax

angularjs

q

angularjs-ng-repeat