Question

我想在各自的重复行中打开所有项目列表，这里是plunker http://embed.plnkr.co/omBL2czm9fRBEVIeQUyD/ 请帮帮我。

这是我的目标：

       $scope.names=[
          {no:'1', name:'Jani', country:'Norway',
                   cities:[{city:'A1'},city:'A2'},{city: 'A3'}]},
          {no:'2', name:'Hege',country:'Sweden', 
                   cities:[{city:'b1'},{city:'b2'}, {city: 'b3'}]},
          {no:'3', name:'Kai',country:'Denmark', 
                   cities:[{city:'c1'},{city:'c2'}, {city: 'c3'}]}];

这是我的HTML：

 <table>
    <tbody ng-repeat="name in names">
        <tr >
            <td>
                {{name.no}}
            </td>
            <td>
            {{name.name}}
            </td>
            <td>{{name.country}}</td>
            <td>
            <button data-ng-click="isOpenPayablePayments[$index] = !isOpenPayablePayments[$index]; togglePayablePayments(name.no, $index)" >Paid</button>
            </td>
        </tr>
        <tr data-ng-show="isOpenPayablePayments[$index]">
                <td>
                    <table>
                        <thead>
                            <tr>
                                <th>City</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr data-ng-repeat="city in cities">
                                <td>{{city.city}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
    </tbody>
</table>

在重复
中回拨按钮

      var getCities = function (no) {
        for (i = 0; i <= $scope.names.length; i++) {
            if (no === $scope.names[i].no) {
                console.log($scope.names[i].cities);
                return $scope.names[i].cities;
            }
        };
    };

    $scope.togglePayablePayments = function (no, index) {
        $scope.cities = getCities(no);

    };

我想用相应的行打开嵌套列表。 plunkr解释了这个问题。

Answer 1

问题没有清楚解释但是我看到当我打开第二棵树时，所有树的所有项目都是相同的。不需要$ scope.cities，这是你问题的根源。

我刚刚改变了第二次重复：

<tr data-ng-repeat="city in cities">
    <td>{{city.city}}</td>
</tr>

到此：

<tr data-ng-repeat="city in name.cities">
      <td>{{city.city}}</td>
</tr>

嵌套的ng-repeat问题打开行中的行列表

1 个答案: