2016-04-27 52 views
0

我对div元素使用ng-repeat。 div元素中的图像具有切换功能。但是,当我点击图像时,函数会被触发,但它显示的是所有div的相同数据。以下是代码。AngularJS:将切换函数添加到ng-repeat内部的图像

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; 
    }); 
} 

在这里,我正在使用的所有div内NG-重复同一范围内的变量。

更新答:

JS:

$scope.studentData = []; 
$scope.studentData[index] = data.list; 

HTML:

回答

1

如果你想拥有独一无二的学生每一个项目,你需要做这样的事情:

<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]"> 
+0

感谢快速回复。我试过了,但得到** TypeError:无法读取未定义**的属性'2'。当我点击图像。 – NNR

+0

您是否定义了'$ scope.items'? – jcubic

+0

谢谢。更新了我的答案。 – NNR