使用forEach修改角度范围变量

Modifying Angular scope variables using forEach

本文关键字：范围 变量 forEach 修改 使用      更新时间：2023-10-19

给定服务器上的以下数据：

people.json:

{
  "Bill": "Bill the Man",
  "Jane": "Jane Doe",
  "Jack": "Jack the Ripper"
}

groups.json:

[
   ["Bill", "Jack"],
   ["Jane", "Jack"]
]

我在controllers.js:中导入它

var websiteApp = angular.module('websiteApp', []);
websiteApp.controller('websiteCtrl', function ($scope, $http) {
  // import data
  $http.get('people.json').success(function (data) {
    $scope.people = data;
  });
  $http.get('groups.json').success(function (data) {
    $scope.groups = data;
  });
  // fill groups with people data
  $scope.groups.forEach(function (group, i) {
    group.forEach(function (person, j) {
      $scope.groups[i][j] = $scope.people[person];
    });
  });
});

然后我将其与以下模板一起使用：

<ul>
  <li ng-repeat="group in groups">
    <ul><li ng-repeat="person in group">{{person}}</li></ul>
  </li>
</ul>

我本想从people.json中得到一个名字列表，但我得到了groups.json中的名字。对console.log的一些进一步研究表明，forEach循环没有被执行。在分配给范围之前，使用局部变量存储数据的进一步试验也没有成功。

我应该如何处理这个问题？关于Angular的工作原理，我有什么不了解的？（注意：我一般是Angular和Javascript框架的新手。）

试试这样的。。。

var websiteApp = angular.module('websiteApp', []);
websiteApp.controller('websiteCtrl', function($scope, $http, $q) {
    // import data
    getPeopleAndGroups = function() {
        var people = $http.get('people.json');
        var groups = $http.get('groups.json');
        return $q.all([people, groups]);
    }

    getPeopleAndGroups().then(function(data) {
        var people = data[0].data;
        var groups = data[1].data;
        // fill groups with people data
        groups.forEach(function(group, i) {
            group.forEach(function(person, j) {
                $scope.groups[i][j] = $scope.people[person];
            });
        });
    })
});

使用$q库，您可以返回一个promise，所以这应该会帮助您——我在工作时无法验证它，但它应该会让您步入正轨。看看Angular q Library

$http本质上是异步的，当两个ajax请求都完成时，您需要调用foreach。例如：

var websiteApp = angular.module('websiteApp', []);
websiteApp.controller('websiteCtrl', function ($scope, $http) {
    // import data
    $http.get('people.json').success(function (data) {
        $scope.people = data;
        $http.get('groups.json').success(function (data) {
            $scope.groups = data;
            // fill groups with people data
            $scope.groups.forEach(function (group, i) {
                group.forEach(function (person, j) {
                    $scope.groups[i][j] = $scope.people[person];
                });
            });
        });
    });

});
相关文章：