Angular forEach返回第一个字母而不是整个单词

时间:2016-02-23 23:25:08

标签: javascript angularjs

我有一个简单的角度函数来从JSON对象获取category属性并返回每个唯一值。然而,当我通过这些值进行ng-repeat时,我只得到第一个字母而不是单词。我确信这只是我对java脚本的一些小误解,但任何帮助都会很棒。除了下面的粘贴作品,请参考我的CodePen

Angular JS:

angular.module('app', ['ngAnimate'])

.controller('starWarsCtrl', function ($scope) {
  $scope.data = [
    {"name": "Obi-Wan Kenobi",
     "index":88,
      "cat": "jedi"},
    {"name": "Yoda",
     "index":69,
      "cat":"jedi"},
    {"name": "Lando",
     "index":31,
      "cat": "smuggler"},
    {"name": "Han Solo",
     "index":90,
      "cat": "smuggler"},
    {"name": "Darth Vader",
     "index":98,
      "cat": "sith"},
    {"name": "Jar-Jar Binks",
     "index":80,
      "cat": "alien"},
    {"name": "Mace Windu",
     "index":45,
      "cat": "jedi"},
    {"name": "Chewy",
     "index":76,
      "cat": "smuggler"}
  ];

  $scope.getCategories = function() {
    var categories = [];

     angular.forEach($scope.data, function(item) {
      angular.forEach(item.cat, function(category) {
        if (categories.indexOf(category) == -1) {
          categories.push(category);
        }
      })
    });
    return categories;
  }

})

HTML:

<div data-ng-app="app" data-ng-controller="starWarsCtrl">
    <ul>
        <li class="box" data-ng-repeat="cat in getCategories()">
          <h2>{{cat}}</h2>
      </li>
    </ul>
</div>

1 个答案:

答案 0 :(得分:0)

你的第二个forEach循环正在处理一个字符串。第二个循环甚至不需要。

angular.forEach($scope.data, function(item) {
    //item.cat is a string
    if (categories.indexOf(item.cat) == -1) {
      categories.push(item.cat);
    }
});

您的第一个forEach循环访问scope.data中的每个项目。这些项是JS对象。我不太熟悉Angular和可用的循环,但通常你不能像对象一样循环数组。但是,您只需检查cat属性,就不需要遍历该对象。所以你可以在那时使用对象。