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 =＆＃34; myDiv1＆＃34; ），但它对其他指令的行为不同（将呈现为< em> ng-model =＆＃34; myDiv {{$ index}}＆＃34; ）。

我的目标是创建一个表，用户可以在日期范围内查看，排序和下载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>

当硬编码时，一切正常。如果在指令中呈现WITHOUT $ 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>

Answer 2

不要依赖$ index或id，而是依赖于object。在你的情况下 - 报告，idk你的报告是什么，但应该是这样的：

<input type="text" ng-blur="validDate($event, report.fromDate)" ng-model="report.fromDate" class="form-control calenderInput" .../>

如何动态地为ng-show值分配一个索引

2 个答案: