ngRepeat中的AngularJS绑定问题(折叠和展开Caret)
AngularJS binding issue in ngRepeat (Collapse and Expand Caret)
我正在尝试在ngRepeat中实现折叠和展开面板。我试过这个:
<tbody ng-repeat="item in Items">
<tr data-toggle="collapse" class="accordion-toggle">
<td>{{item.name}}</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed;getDetails(item.id);" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></a>
</td></tr>
<tr>
<td class="hiddenRow">
<div class="accordian-body collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead><tr>
<th>Student Name</th><th>Roll Number</th></tr></thead>
<tbody>
<tr>
<td>{{studentRecord.patientName}}</td><td>{{studentRecord.rollNumber}}</td>
</tr></tbody></table>
</div>
</td>
</tr>
</tbody>
脚本:
$scope.getDetails = function (sId)
{
var studentDetails = DetailService.getDetail("studentsDetails", sId);
studentDetails.then(function(data) {
$scope.studentRecord = data;
});
}
当我点击ngRepeat中的单个插入符号按钮时,它工作得很好。但是,当我点击多个项目时,中继器会为每个项目创建一个范围。因此,ngRepeat中的所有记录都获得相同的范围值。如何解决。
U应该在类似的项中生成属性
item.studentRecord
然后使用
getDetails(item)
$scope.getDetails = function (item)
{
var studentDetails = DetailService.getDetail("studentsDetails", item.id);
studentDetails.then(function(data) {
item.studentRecord = data;
});
}
<td>{{item.studentRecord.patientName}}</td>
<td>{{item.studentRecord.rollNumber}}</td>
相关文章:
- ExtJS——在展开/折叠时调整面板高度
- 展开和折叠文件夹
- 展开和折叠自举手风琴
- 默认情况下折叠和展开嵌套列表
- Bootstrap折叠按钮不适用于android
- 展开移动设备上的折叠菜单,同时在桌面上保持悬停
- 展开/折叠跨度
- 如何在小页面中移动折叠下方的渲染阻塞javascript
- 默认情况下,在展开和折叠表时隐藏行
- 网格子网格在渲染时折叠
- 自动折叠移动设备上的OpenUI5侧边导航
- Visual Studio展开方法和所有子作用域或仅折叠方法
- 如果显示另一个折叠的图元,如何隐藏该图元
- 可折叠树在第二级不显示子树
- 引导程序/轨道-可折叠导航栏没有'我不能在手机上工作
- Bootstrap折叠手风琴一个面板打开,所有其他面板关闭
- 只使用CSS创建可折叠菜单或spry菜单
- 文本编码折叠
- 如何在页面加载时折叠手风琴样式的特定部分
- ngRepeat中的AngularJS绑定问题(折叠和展开Caret)