Javascript 通过错误索引的角度ng重复过滤器
我很难弄清楚如何通过过滤器从ng重复中传递正确的索引号。我正在使用模式窗口编辑表中的行。问题是我依赖索引号进行REST调用,并为编辑模式窗口获取正确的数据 ng重复代码:Javascript 通过错误索引的角度ng重复过滤器,javascript,angularjs,angularjs-ng-repeat,bootstrap-modal,Javascript,Angularjs,Angularjs Ng Repeat,Bootstrap Modal,我很难弄清楚如何通过过滤器从ng重复中传递正确的索引号。我正在使用模式窗口编辑表中的行。问题是我依赖索引号进行REST调用,并为编辑模式窗口获取正确的数据 ng重复代码: <tr ng-repeat="myItem in myItems | filter:{Status :'!Completed'}"> <td data-title="Title">{{myItem.Title}}</td> <td data-title=
<tr ng-repeat="myItem in myItems | filter:{Status :'!Completed'}">
<td data-title="Title">{{myItem.Title}}</td>
<td data-title="Category">{{myItem.Category}}</td>
<td data-title="Priority">{{myItem.Priority}}</td>
<td data-title="Due Date">{{myItem.DueDate}}</td>
<td data-title="Due Date">{{myItem.Status}}</td>
<td data-title="Due Date">{{myItem.AssignedTo}}</td>
<td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
<td data-title="Delete"><span style=" margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
</tr>
为了进行正确的$httpget
调用,需要索引号来获取当前项目的id
但是过滤器改变了索引的顺序,我似乎找不到一个好的替代方法
有什么建议吗
解决方案:
传递对象/项而不是索引似乎可以完成以下任务:
HTML:
JS:
我现在可以使用ID编辑/删除正确的项目。当然,这需要一个与项目关联的ID。正如在评论中指出的那样,ID在许多情况下都会派上用场
谢谢你的帮助 过滤器干扰索引是一个常见问题 您可以通过实现如下逻辑来绕过它:
<tr ng-repeat="myItem in myItems" ng-show="myItem.Status !== 'Completed'">
<td data-title="Title">{{myItem.Title}}</td>
<td data-title="Category">{{myItem.Category}}</td>
<td data-title="Priority">{{myItem.Priority}}</td>
<td data-title="Due Date">{{myItem.DueDate}}</td>
<td data-title="Due Date">{{myItem.Status}}</td>
<td data-title="Due Date">{{myItem.AssignedTo}}</td>
<td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
<td data-title="Delete"><span style=" margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
</tr>
{{myItem.Title}
{{myItem.Category}
{{myItem.Priority}
{{myItem.DueDate}
{{myItem.Status}
{{myItem.AssignedTo}
更安全的替代方法是,为对象myItem.id
引入一个unqiue id,并将其用作在http请求中加载哪个资源的标识符。因此,您不必依赖于$index
,正如托梅克·苏尔科夫斯基指出的那样,这可能会导致一些问题(行为可能会随着角度的不同而改变)。这是一个非常简单的解决方案。非常感谢!这将创建-取决于完成vs的速率!已完成的行-许多不可见的HTML,这是不必要的。尽管您需要将“myItem.Status==”!Completed'
更改为“myItem.Status!==”Completed'
@RemigiusStalder,这可能是真的。在这种情况下,可以使用ng if
而不是ng show
@TietjeDK,右:)我已经更新了使用ng if和ng repeat的代码,请看这里:在生产ID(如果还不可用)时,imho是一种可持续的方式,因为它们很可能还有其他好处。我也这么认为。客户端上的所有数据都应该以类似的方式在服务器上表示/反映。您的对象应该始终有一个唯一的标识符。例如,如果您的myItem
存储在服务器上的数据库中,请使用id
字段(如果没有id
字段,请创建一个!)。每个实体都有id,但我似乎可以将它们传递到我的模式窗口。传递项目似乎是正确的方法。这样我就可以使用包含的ID!我已经用我的解决方案编辑了op。
data-ng-click="openEditModal(myItem)
$scope.openEditModal = function(myItem) {
var idx = $scope.myItems.indexOf(myItem);
var modalInstance = $modal.open({
controller: 'modalCtrl',
templateUrl: 'https://xxxx/App/editModal.html',
windowClass: "editModal",
resolve: {
index: function() {
return idx
}
}
});
}
<tr ng-repeat="myItem in myItems" ng-show="myItem.Status !== 'Completed'">
<td data-title="Title">{{myItem.Title}}</td>
<td data-title="Category">{{myItem.Category}}</td>
<td data-title="Priority">{{myItem.Priority}}</td>
<td data-title="Due Date">{{myItem.DueDate}}</td>
<td data-title="Due Date">{{myItem.Status}}</td>
<td data-title="Due Date">{{myItem.AssignedTo}}</td>
<td data-title="Edit"><span class="mdi-content-create editIcon" data-ng-click="openEditModal($index)" style="cursor:pointer"></span></td>
<td data-title="Delete"><span style=" margin-left: 10px;" class="mdi-content-clear editIcon" ng-confirm-click="Are you sure you want to delete this request?" confirmed-click="deleteItem($index)" style="cursor:pointer"></span></td>
</tr>