Question

我正在尝试打印一个包含2个不同数组的2个元素（动态绑定）的列表。

以下是我的代码：的 scopehie.html

<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="scopehie.js"></script>

<body ng-app="myApp">
    <div ng-controller="parentCtrl">
        Hello {{name}} !! </br></br>
    </div>
    <div ng-controller="childCtrl">
        <ol>
            <li ng-repeat-start="name in names", ng-repeat-end="dept in department">{{name}} from {{dept}}</li>
        </ol>
    </div>
</body>

</html>

scopehie.js

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

app.controller('parentCtrl', function($scope, $rootScope){
    $scope.name = 'World';
    $rootScope.department = 'Angular' ;
}) ;

app.controller('childCtrl' , function($scope){
    $scope.names = ['A' , 'B' , 'C' , 'D'];
    $scope.department = ['M' , 'N' , 'O'];

});

问题在于我的第一个参数，即＆＃34;名称中的名称＆＃34;是循环但第二个参数，即部门＆＃34; dept;没有循环，事实上它根本没有显示。

显示输出：

Hello World !!

1.A来自 2.B来自 3.C来自 4.D来自

需要输出：

Hello World !!

1.A来自M
2.B来自N
3.O来自O
4.D来自P

请提出建议。

Answer 1

尝试这种简单的$index方式

<li ng-repeat="dept in department">{{names[$index]}} from {{dept}}</li>

您只能使用ng-repeat执行此操作。不需要开始和结束。

Answer 2

使用类似的东西：

<ol>
   <li ng-repeat="name in names">  
   {{name}} from {{department[$index]}}</li>
</ol>

问题是你可以在一个可靠的地方使用ng-repeat。虽然ng-repeat-start和-end用于重复一个html标签块而不是一个标签。所以......

Answer 3

如果名称和部门之间存在一对一的映射，那么您可以这样做。

<li ng-repeat="name in names">{{name}} from {{department[$index]}}</li>

Answer 4

工作示例here

<body ng-app="myApp">
  <div ng-controller="parentCtrl">
    Hello {{name}}
    <br>
  </div>
  <div ng-controller="childCtrl">
    <ol>
      <li ng-repeat="name in names">
        {{name}} from {{department[$index]}}
        <br>
      </li>
    </ol>
  </div>
</body>

为2个参数实现ng-repeat

4 个答案: