AngularJS 双 ng-repeat

Question

我在手风琴组工作，有两个 ng-repeat。外周重复从当前周到特定日期的周数。内部每周有几天重复工作时间。

函数expand(week.id)是调用数据库，为变量"hour"准备数据。

我的问题是，当我点击一个 accordion-heading 显示第 1 周的数据时，所有其他周（手风琴）的其余部分也显示相同的数据，这使得这个过程非常缓慢。

我怎样才能在我点击的标题下呈现 trs？例如，我的场景是当我点击第 1 周的标题时，只呈现第 1 周下的 trs。

谁能帮我解决这个问题？

  <accordion-group   ng-repeat="week in weeks">
        <accordion-heading >
            <span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span>
        </accordion-heading>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Task</th>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
                <th>Total</th>
            </tr>
            </thead>
            <tbody id={{week.id}}>
            <tr ng-repeat="hr in hour">

                <td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td>
                <td><input type="number" min="0" ng-model="hr.sun" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.mon" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.tue" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.wed" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.thu" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.fri" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><input type="number" min="0" ng-model="hr.sat" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
                <td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td>
            </tr>
            </tbody>
        </table>
         </accordion-group>

Answer 1

hr in hour 可能使同一模型小时的所有内容，在这种情况下，如果您可以使小时成为属性周，则需要像 week.hour 中的 hr 那样分隔模型。如果不是，如果小时和周相关，您可以尝试这样的 ng-init，其中小时而不是显示的小时数组是具有显示小时的数组数组：

<accordion-group   ng-repeat="week in weeks" ng-init="weekIndex = $index">
    <accordion-heading >
        <span ng-click="expand(week.id)">{{week.firstday}}--{{week.lastday}}</span>
    </accordion-heading>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>Task</th>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
            <th>Total</th>
        </tr>
        </thead>
        <tbody id={{week.id}}>
        <tr ng-repeat="hr in hours[weekIndex]">

            <td> <select class="form-control input-sm" ng-disabled="false"><option value="hr.task_name">{{hr.task_name}}</option></select></td>
            <td><input type="number" min="0" ng-model="hr.sun" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.mon" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.tue" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.wed" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.thu" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.fri" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><input type="number" min="0" ng-model="hr.sat" class="form-control"  placeholder="Hours" ng-disabled="true"></td>
            <td><span class="form-control">{{hr.sun+hr.mon+hr.tue+hr.wed+hr.thu+hr.fri+hr.sat}}</span></td>
        </tr>
        </tbody>
    </table>
</accordion-group>

Answer 2

因为所有周都共享同一个变量 hour，展开一个标题将导致同一个变量被覆盖，修改所有窗格的内部 ng-repeat 内容。

相反，您需要在 weeks 中的每个 week object 上制作 hour 一个属性，或者您需要有一个单独的 object/map 存储小时数组 week.id.

对于后者，请在控制器的开头添加以下行：

$scope.hours = {};

然后在您的 expand() 函数中，不是填充 $scope.hour，而是填充 $scope.hours[weekId].

最后，将您的内部 ng-repeat 表达式更改为：

hr in hours[week.id]

AngularJS 双 ng-repeat

AngularJS double ng-repeat

javascript

jquery

jquery-ui-accordion

angularjs

angularjs-ng-repeat