对 DOM 块的 ng-repeat 变量范围

Question

我是在做梦还是我真的在某个地方看到过，但我不记得确切的语法。所以如果我有

var fooObjects = [{ name:"John", age:15 }, 
                  { name: "Michael", age:26 }, 
                  ...etc...]

和

<div ng-repeat="for foo in fooObjects">     <-- note, this isn't real syntax
   {{name}}              <-- Now you don't have to explicitly call `foo.name`
   {{age}}                                          inside of this div block
</div>

Answer 1

来自https://docs.angularjs.org/api/ng/directive/ngRepeat 的示例。试试这样的：

  <div ng-init="friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'},
  {name:'Peter', age:95, gender:'boy'},
  {name:'Sebastian', age:50, gender:'boy'},
  {name:'Erika', age:27, gender:'girl'},
  {name:'Patrick', age:40, gender:'boy'},
  {name:'Samantha', age:60, gender:'girl'}
  ]">
    <ul>
      <li ng-repeat="friend in friends">
        {{friend.name}} who is {{friend.age}} years old.
      </li>
    </ul>
  </div>

这是一个带有 http://plnkr.co/edit/I19oBk20T5ldLZe7GYqN?p=preview 示例的 plunker

--编辑--

我误解了你之前的问题。您可以通过在控制器中实现以下内容来为 ng-repeat 中的变量设置别名：

$scope.scopify(scope, object) {
  for (var o in object) {
    scope[o] = object[o];
  }
}

使用如下：

<li ng-repeat="friend in friends" ng-init="scopify(this, friend)">  
  {{name}}, {{age}}, {{gender}}
</li>

这是一个带有工作示例的 plunker：http://plnkr.co/edit/Y8c4uOagcdM5cXN81TET?p=preview

除了上面的例子，您还可以通过ng-init 指令为对象的任何属性创建别名。例如，另一种可能的解决方案是：

<li ng-repeat="friend in friends" 
    ng-init="name = friend.name; age = friend.age; gender = friend.gender">
  {{name}}, {{age}}, {{gender}}
</li>

我们可以使用ng-init 创建可以在该html 块中引用的别名。虽然如果您只打算引用每个属性一次，这不是很有用，但如果您必须在一个 html 块中多次重复相同的属性，它可能会派上用场。