AngularJS:为ng-repeat中的图像添加切换功能
AngularJS: Add toggle function to an image inside ng-repeat
我正在使用ng-repeat来表示div元素。我在div 元素内的图像上有一个切换功能。但是,当我单击图像时,函数被触发,但它为所有div 显示相同的数据。下面是代码。
.HTML:
<div ng-repeat="item in items">
<div>
<img src="img/icon1.png" class="pull-right" ng-click="showDiv(item.itemId,$index)">
</div>
<div ng-show="hiddenDiv[$index]">
<div ng-repeat="student in studentData">
<div class="row">
<div>
<div>{{student.name}}</div>
<div>{{student.adress}}</div>
</div>
</div>
</div>
</div>
</div>
.JS:
$scope.hiddenDiv=[];
$scope.showDiv=function(itemId,index) {
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
var myResult = ListService.getList(url here);
myResult.then(function (data) {
if(data && data.list)
$scope.studentData = data.list;
});
}
在这里,我在 ng-repeat 内的所有div 中使用相同的范围变量。
更新的答案 :
.js:
$scope.studentData = [];
$scope.studentData[index] = data.list;
.HTML:
如果你想让
每个项目都有唯一的学生,你需要做这样的事情:
<div ng-repeat="item in items">
<div>
<img src="img/icon1.png" class="pull-right" ng-click="showDiv(item.itemId,$index)">
</div>
<div ng-show="hiddenDiv[$index]">
<div ng-repeat="student in item.studentData">
<div class="row">
<div>
<div>{{student.name}}</div>
<div>{{student.adress}}</div>
</div>
</div>
</div>
</div>
</div>
和 js:
$scope.hiddenDiv=[];
$scope.showDiv=function(itemId,index) {
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
var myResult = ListService.getList(url here);
myResult.then(function (data) {
if(data && data.list)
$scope.items[index].studentData = data.list;
});
}
或与 hiddenDiv 相同
$scope.hiddenDiv=[];
$scope.studentData = [];
$scope.showDiv=function(itemId,index) {
$scope.hiddenDiv[index] = !$scope.hiddenDiv[index];
var myResult = ListService.getList(url here);
myResult.then(function (data) {
if(data && data.list)
$scope.studentData[index].studentData = data.list;
});
}
和 html:
<div ng-repeat="student in studentData[$index]">
相关文章:
- 向现有事件侦听器添加功能
- 新手帮助向jQuery添加功能
- 通过访问DOM添加功能
- 如何为聚合物元素添加功能属性
- 向地图框添加功能.js
- 为什么你不应该向JavaScript构造函数添加功能,而是通过原型
- 为通讯录添加功能
- 向 JavaScript 中的预定义事件添加功能
- 在state.go(ui路由器)之后添加功能
- 意外的令牌''在向原型添加功能时
- 在JQuery日期选择器中再添加一个事件当前添加功能不起作用
- 如何在引导模式中添加功能- Laravel
- 添加功能,如果歌曲/轨道结束
- 向JavaScript日历添加功能
- 在windows上添加功能.Load只适用于相同的javascript
- 向Javascript原型添加方法和向现有对象添加功能之间的区别是什么?
- 如何在jquery中传递html数据表的行添加功能
- 使用原型添加功能
- 用React以类似于markdown的方式为用户注释添加功能
- 使用Angular向各个列表项添加功能