Question

我正在使用Angular并尝试创建嵌套的ng-repeats。我在这里提到了Angular网站上的ng-repeat示例here。但是，当我使用下面的代码时，<ul>标记重复，但<li>标记为空。有关如何正确执行此操作的任何建议吗？

（编辑：更新数组以发表评论）

阵列：

vm.projects = [
  {"$id": "1234",
   "people": {
    "-K-v76MWDTIQqnR2w10r": {
     "name": "John Doe",
     "city": "New York",
     "company": "Acme, Inc."
  },
  "-K-q7HmGUduAf5JkSGDY": {
    "name": "Jane Smith",
    "city": "Chicago",
    "company": "ABC, Inc."
   }
  }
},
{
 "$id": "2345",
 "people": {
   "-K-qq6Pcd0v1wggmALcZ": {
    "name": "David Jones",
    "city": "London",
    "company": "Stardust, LLC"
   }
  }
}
]

HTML

<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
  <li ng-repeat="name in vm.projects.people.name track by projects.$id">{{project.person.name}}
  </li>
</ul>

以下是实际显示的内容：

ID: 1234
ID: 2345

Answer 1

你想要做（像你的内心ng-repeat）：

name in project.people

而不是

name in vm.projects.people.name track by projects.$id

（如果你发布了一个有效的JSON样本，我可以给你准确的东西。）

Answer 2

您可以在li中使用父ul项目对象，如下所示：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example85-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>

</head>
<body ng-app="initExample">
  <script>
  angular.module('initExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.projects = [{"$id":"1234","people":{"-K-v76MWDTIQqnR2w10r":{"name":"John Doe","city":"New York","company":"Acme, Inc."},"-K-q7HmGUduAf5JkSGDY":{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}}},{"$id":"2345","people":{"-K-qq6Pcd0v1wggmALcZ":{"name":"David Jones","city":"London","company":"Stardust, LLC"}}}];
    }]);
</script>
<div ng-controller="ExampleController">
  <ul ng-repeat="project in projects" >ID: {{project.$id}} 
  <li ng-repeat="(id, person) in project.people">{{person.name}}
  </li>
</ul>
</div>
</body>
</html>

Answer 3

{
    Container<T> output = input;
    Container<T>::const_iterator in_it = input.begin();

    for (Container<T>::iterator out_it = std::next(output.begin());
         out_it != output.end(); ++out_it, ++in_it)
        *out_it += *in_it;

    return output;
}

// Example
vector<float> a = { 0, 1, 2, 3, 4, 5 ...};
vector<float> b = MyFunction(a);
// Another example
list<MyType> c = { object1, object2, ... };
list<MyType> d = MyFunction(c);

Answer 4

首先，重要的是要指出您的JSON中存在一些重要的语法问题，这些问题正在破坏您的ng-repeats。

您必须引用第一个ng-repeat中的对象（您在ul标记中声明的对象），以确保为li标记范围正确映射范围。在我的示例中，“someKey”指的是您拥有的字母数字字符串。您需要确保每个子结构中的它们相同才能正确引用它们。这就是我将名称改为“someKey”的原因。我的建议是使用名为“data”的密钥，然后使用“id”来跟踪您用于密钥的数据的名称。例如：

{"$id": "1234",
  "people": {

 id: "-K-v76MWDTIQqnR2w10r",
 data: {
 "name": "John Doe",
 "city": "New York",
 "company": "Acme, Inc."

}，

以下是代码：

  $scope.vm = {};
  $scope.vm.projects = [
      {$id:"1234",
       "people":[
           {"someKey":
             {"name":"John Doe","city":"New York","company":"Acme, Inc."}
           },
           {"someKey":
             {"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}
           }]  
  },    
      {$id:"2345",
       "people":[
               {"someKey":
                  {"name":"David Jones","city":"London","company":"Stardust, LLC"}
               }]
            
 }
  ]

<div ng-controller="MyCtrl">
  Hello, {{name}}!
  <ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
  <li ng-repeat="people in project.people">{{people.someKey.name}}
  </li>
</ul>
</div>

在Angular中创建嵌套的ng-repeats

4 个答案: