javascript - 如何动态地将索引分配给 ng-show Angular 值

Question

为什么这不起作用？

<div ng-repeat="report in reports track by $index">
    <div ng-model="myDiv{{ $index }}" ng-show="myDiv{{ $index }}">{{ report }} {{ index }}</div>
</div>

像这样吗？

<div ng-repeat="report in reports track by $index">
    <div id="myDiv{{ $index }}"  name="myDiv{{ $index }}">{{ report }} {{ index }}</div>
</div>

虽然您可以将 $index 添加到任何名称或 id(呈现为 id="myDiv1")，但它对于其他指令的行为并不相同(将呈现为 ng-model ="myDiv{{ $index }}")。

我的目标是创建一个表格，用户可以在其中查看、排序和下载某个日期范围内的 6-10 个不同的报告。客户端需要在页面上同时显示可排序的报告列表，每个报告都有自己的日期范围选择器。由于报告选择因用户而异，因此这需要动态完成。以下基本上是我想做的......

<tr ng-repeat="report in reports track by $index">
    <td><p>{{ report.title }}</p></td>
    <td>
        <div id="dateRangePicker{{ $index }}">
            <div id="fromDateWrapper{{ $index }}" class="col-md-6">
                <p class="input-group">
                    <input id="fromDateInput{{ $index }}" type="text" ng-blur="validDate($event,$index)" is-open="openFrom{{ $index }}" ng-model="fromDate{{ $index }}" class="form-control calenderInput" datepicker-popup="MM/dd/yyyy" min-date="minDate" max-date="toDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
                    <span id="fromDateButton{{ $index }}" class="input-group-btn">
                        <button type="button" class="btn btn-default " ng-click="openCalender($event,'fromDate',$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>      
            <div id="toDateWrapper{{ $index }}" class="col-md-6">
                <p class="input-group"> 
                   <input id="toDateInput{{ $index }}" type="text" ng-blur="validDate($event,$index)" is-open="openTo{{ $index }}" ng-model="toDate{{ $index }}" class="form-control calenderInput" datepicker-popup="MM/dd/yyyy" min-date="fromDate{{ $index }}" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
                    <span id="toDateButton{{ $index }}" class="input-group-btn">
                        <button type="button" class="btn btn-default" ng-click="openCalender($event,'toDate',$index)"><i class="glyphicon glyphicon-calendar"></i></button>
                    </span>
                </p>
            </div>
        </div>
    </td>
   <td><button id="printReport{{ $index }}" type="button" ng-click="printReport($index)">Print Report</button></td>
</tr>

当硬编码时，一切正常。如果在指令中没有 $index 的情况下呈现，每个日历都会影响其他日历，因为它们都依赖于相同的变量，这些变量使它们显示、隐藏、重置等。

希望我只是以错误的方式或解决方法这样做，或者很快需要另一个解决方案。

Answer 1

您想要做的事情是不可能的，对于初学者来说，您正在设置 ng-model在<div></div>上当模型指令只能用于表单元素(例如输入)时。您还使用 {{}}指令表达式内的方括号将不起作用。

为什么不将索引对存储在对象中并执行以下操作:

$scope.myDiv = {};

<div ng-repeat="report in reports track by $index">
    <input type="text" ng-model="myDiv[index]" ng-show="myDiv[index]" />
</div>