问题与forEach

时间:2014-12-05 06:52:30

标签: angularjs foreach

要获取我在AngularJS中使用forEach的特定密钥,但在forEach内部控件不会。

任何人都可以解释我缺少的东西吗?

var stories = {"1": "What is the name of your primary school?", 
               "2": "What is your favorite color?", 
               "3": "What is your favorite pet?"};

function addStories(stories) {
  var changed = false;
  angular.forEach(stories, function(story, key) {
          //my logic.....
  });
}

1 个答案:

答案 0 :(得分:4)

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

app.controller('MainCtrl', ['$scope', function($scope) {

  var theMap = { 
    "1": "What is the name of your primary school?", 
    "2": "What is your favorite color?", 
    "3": "What is your favorite pet?"
  };

  $scope.data = {
    keys: [],
    values: []
  };

  angular.forEach(theMap, function(value, key) {
    $scope.data.keys.push(key);
    $scope.data.values.push(value);
  });


}]);

HTML:

<body ng-app="myApp" ng-controller="MainCtrl">

  <div ng-repeat="key in data.keys">key: {{key}}</div>
  <div ng-repeat="value in data.values">value: {{value}}</div>

</body>

结果:

key: 1
key: 2
key: 3
value: What is the name of your primary school?
value: What is your favorite color?
value: What is your favorite pet?

其他示例:

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

app.controller('MainCtrl', ['$scope', function($scope) {

  $scope.getQuestionNumber = function(questions, target_question) {
    angular.forEach(questions, function(question, number) {
      if(question === target_question) {
        $scope.data.question_number = number;
      }
    })
  };

  var questions = { 
    "1": "What is the name of your primary school?", 
    "2": "What is your favorite color?", 
    "3": "What is your favorite pet?"
  };

  var target_question = "What is your favorite color?";

  $scope.data = {}; //put results in here
  $scope.getQuestionNumber(questions, target_question);

}]);

HTML:

<body ng-app="myApp" ng-controller="MainCtrl">

  <div>Question number: {{data.question_number}}</div>

有关angular.forEach()的一些注意事项:

1)不是在这里调用函数的人:

                               |
                               V
angular.forEach(questions, function(question, number) {
  return "1";
}

相反,一些角度代码正在调用该函数。这意味着您无法从函数中获取返回值。角度源代码中的某处有类似的东西:

//Definition of forEach() function:
function forEach(obj, func) {
  ...
  ...

  func(val, key);
}

请注意,angular不会将func()的返回值存储在任何位置。因此,无论函数返回什么,都会丢弃返回值。

2)此外,angular调用循环中的函数:

  function forEach(obj, func) {
    ...
    ...
    var obj_properties = obj.getOwnPropertyNames();
    var i;
    var len = obj_properties.length;

    for(i=0; i<len; ++i) {
       ...
       ...
       func(val, key);
    }
  }

所以如果你写:

    angular.forEach(questions, function(question, number) {
      if(question === target_question) {
        $scope.data.question_number = number
        return;  //***WHAT DOES THIS DO?***
      }
    })

... return语句相当于`return undefined',结果如下:

    //Inside the Angular loop:

    for(i=0; i<len; ++i) {
       undefined;   //func(val, key) gets replaced by it's return value each time through the loop
    }
  }

...并且没有成功突破角度for循环 - 因此即使找到匹配项,也会检查所有属性。

我不知道您是否可以重组您的数据,但如果您重新组织这样的数据:

  var questions = { 
    "What is the name of your primary school?": "1",
    "What is your favorite color?": "2",
    "What is your favorite pet?": "3"
  };

然后你可以写:

  var target_question = "....";
  var number = questions[target_question];

...这比逐个元素地逐步遍历数组要有效得多,直到找到匹配为止。