angularjs - AngularJS 中的 foreach 循环

Question

我正在经历 AngularJS 中的 forEach loop。有几点我不明白。

1. 迭代器函数有什么用？没有它还有什么办法吗？
2. 如下所示的键和值有何意义？

angular.forEach($scope.data, function(value, key){});

PS:我尝试在不带参数的情况下运行此函数，但它不起作用。

这是我的 json:

[
   {
     "Name": "Thomas",
     "Password": "thomasTheKing"
   },
   {
     "Name": "Linda",
     "Password": "lindatheQueen"
   }
]

我的 JavaScript 文件:

var app = angular.module('testModule', []);

app.controller('testController', function($scope, $http){
   $http.get('Data/info.json').then(
      function(data){
         $scope.data = data;
      }
   );

   angular.forEach($scope.data, function(value, key){
      if(value.Password == "thomasTheKing")
         console.log("username is thomas");
   });
});

另一个问题:为什么上面的函数没有进入if条件并在控制台中打印“username is thomas”？

Answer 1

问题 1 和 2

基本上，第一个参数是要迭代的对象。它可以是一个数组或一个对象。如果它是这样的对象:

var values = {name: 'misko', gender: 'male'};

Angular 会逐一获取每个值，第一个是姓名，第二个是性别。

如果要迭代的对象是一个数组(也可能)，如下所示:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]

Angular.forEach 将从第一个对象开始逐一获取，然后是第二个对象。

对于每个对象，它将一一获取它们并为每个值执行特定的代码。这段代码称为迭代器函数。 forEach 很聪明，如果您使用的是集合数组，则其行为会有所不同。这是一些示例:

var obj = {name: 'misko', gender: 'male'};
var log = [];
angular.forEach(obj, function(value, key) {
  console.log(key + ': ' + value);
});
// it will log two iteration like this
// name: misko
// gender: male

所以 key 是你的 key 的字符串值，value 是......值。您可以使用键来访问您的值，如下所示:obj['name'] = 'John'

如果这次您显示一个数组，如下所示:

var values = [{ "Name" : "Thomas", "Password" : "thomasTheKing" },
           { "Name" : "Linda", "Password" : "lindatheQueen" }];
angular.forEach(values, function(value, key){
     console.log(key + ': ' + value);
});
// it will log two iteration like this
// 0: [object Object]
// 1: [object Object]

那么 value 就是你的对象(集合)，key 就是你的数组的索引，因为:

[{ "Name" : "Thomas", "Password" : "thomasTheKing" },
 { "Name" : "Linda", "Password" : "lindatheQueen" }]
// is equal to
{0: { "Name" : "Thomas", "Password" : "thomasTheKing" },
 1: { "Name" : "Linda", "Password" : "lindatheQueen" }}

希望它能回答你的问题。如果需要的话，这里有一个 JSFiddle 用于运行一些代码并进行测试: http://jsfiddle.net/ygahqdge/

调试代码

问题似乎来自于 $http.get() 是一个异步请求。

您向您的儿子发送查询，THEN当您浏览器结束下载时，它执行成功。 但是发送请求后，您可以使用 angular.forEach 执行循环，而无需等待 JSON 的答案。

您需要在成功函数中包含循环

var app = angular.module('testModule', [])
    .controller('testController', ['$scope', '$http', function($scope, $http){
    $http.get('Data/info.json').then(function(data){
         $scope.data = data;

         angular.forEach($scope.data, function(value, key){
         if(value.Password == "thomasTheKing")
           console.log("username is thomas");
         });
    });

});

这应该有效。

更深入

The $http API is based on the deferred/promise APIs exposed by the $q service. While for simple usage patterns this doesn't matter much, for advanced usage it is important to familiarize yourself with these APIs and the guarantees they provide.

您可以查看deferred/promise APIs ，做出流畅的异步 Action 是 Angular 的一个重要概念。