如何在ng-repeat中传递动态范围值

时间:2015-05-29 06:09:16

标签: javascript angularjs

在此我创建了嵌套的ng-repeat.Now我需要将第一个ng-repeat id值传递给内部ng-repeat。如何在内部val.id

中传递ng-repeat

我的表

<table>
<tr ng-repeat="val in sample">
<td>
<table>
    <tr>
        <td>{{val.id}}</td>
        <td>{{val.name}}</td>
     </tr>
         <tr ng-repeat="new_val in new_sample{{val.id}}">
         <td>
             <table>
                 <tr>
                     <td>{{new_val .new_id}}</td>
                     <td>{{new_val .new_name}}</td>
                 </tr>
              </table>
         </td>
         </tr>
</table>
</td>
</tr>
</table>

我的剧本

var myApp = angular.module("myApp", []);
myApp.controller("MyController", function MyController($scope){ 
    $scope.sample = [
        {'id' : '1','name' : 'jon'},
        {'id' : '2','name' : 'albert'}
    ];

    $scope.new_sample1 = [
        {'id' : '11','name' : 'jon1'},
        {'id' : '22','name' : 'albert1'}
    ];

    $scope.new_sample2 = [
        {'id' : '111','name' : 'jon2'},
        {'id' : '222','name' : 'albert2'}
    ];
});

3 个答案:

答案 0 :(得分:2)

您可以在ng-repeat元素中使用ng-init来完成此操作。在这种情况下,您的HTML将是

<table ng-app="myApp" ng-controller="MyController">
<tr ng-repeat="val in sample" ng-init="subVal=new_sample[val.id]">
<td>
<table>
    <tr>
        <td>{{val.id}}</td>
        <td>{{val.name}}</td>

     </tr>
         <tr ng-repeat="new_val in subVal">
         <td>
             <table>
                 <tr>
                     <td>{{new_val.id}}</td>
                     <td>{{new_val.name}}</td>
                 </tr>
              </table>
         </td>
         </tr>
</table>
</td>
</tr>
</table>

在你的剧本里面。

var myApp = angular.module("myApp", []);
    myApp.controller("MyController", function MyController($scope){ 
     $scope.sample = [
     {'id' : '1','name' : 'jon'},
     {'id' : '2','name' : 'albert'}
     ]

     $scope.new_sample = {
         1 : [  
                 {'id' : '11','name' : 'jon1'},
                 {'id' : '22','name' : 'albert1'}
             ],
         2 : [
                 {'id' : '111','name' : 'jon2'},
                 {'id' : '222','name' : 'albert2'}
         ]

    }

     });

但请注意,您需要更改上面提到的new_sample对象。工作Feedel就在这里

答案 1 :(得分:0)

ng-repeat div应该通过其索引访问数组&amp;这在标记本身上是可行的。

<强>标记

<tr ng-repeat="new_val in ['new_sample'+ val.id]">

答案 2 :(得分:0)

您无法使用{{}}访问ng-repeat中的对象名称。您需要更改对象的结构才能动态访问它们。

这是一点点改动。

 var myApp = angular.module("myApp", []);
 myApp.controller("MyController", function MyController($scope){ 
      $scope.sample = [
           {'id' : '1','name' : 'jon'},
           {'id' : '2','name' : 'albert'}
      ]

      $scope.innerSample = {
           "new_sample1" : [
                {'id' : '11','name' : 'jon1'},
                {'id' : '22','name' : 'albert1'}
           ],
           "new_sample2" : [
                {'id' : '111','name' : 'jon2'},
                {'id' : '222','name' : 'albert2'}
           ]  
      };
 });

HTML文件

 <table>
      <tr ng-repeat="val in sample">
           <td>
                <table>
                    <tr>
                        <td>{{val.id}}</td>
                        <td>{{val.name}}</td>
                     </tr>
                          <tr ng-repeat="new_val in innerSample[newSample{{val.id}}]">
                              <td>
                                  <table>
                                      <tr>
                                          <td>{{new_val .new_id}}</td>
                                          <td>{{new_val .new_name}}</td>
                                      </tr>
                                   </table>
                              </td>
                         </tr>
                </table>
           </td>
      </tr>
 </table>