Javascript 为什么行单击事件在angular中不能正常工作？

我试图在行单击时展开和折叠行。但在我的演示中，我单击了任何行，它只打开最后一行为什么？换句话说，我试图在行单击时显示和隐藏行描述，但单击时仅显示第三行的描述，而不要求显示我单击的行。它只展开第三行

这是我的密码

angular.module('app',['ionic']).controller('apptes',function($scope){
 $scope.toogle_item=false;
 $scope.obj=[{
   number:"123",
   name:"bil"
 },{
   number:"547",
   name:"till"
 },{
   number:"123223",
   name:"test"
 }]
  $scope.clickrow=function(){
    $scope.toogle_item=!$scope.toogle_item;
  }


})

有两个问题

在

ng repeat

之外的代码中，数组中的每个项目都需要一个

项目正文

/

项目选项卡

，因此只有一组选项卡。为了解决这个问题，我将

ng repeat

移动到了上一层

由于您希望一次只显示一个项目，因此可以选择如下所示的基于索引的解决方案

所以

angular.module（'app'，['ionic']）。controller（'apptes'，function（$scope）{
$scope.toogle_item=false；
$scope.obj=[{
编号：“123”，
名称：“比尔”
}, {
编号：“547”，
姓名：“直到”
}, {
编号：“123223”，
名称：“测试”
}]
$scope.clickrow=函数（索引）{
$scope.toogle_item=$scope.toogle_item===索引？-1：索引；
}
})

.bg、.item.bg{
背景：浅灰色；
位置：相对位置；
}
普塔格先生{
位置：绝对位置；
排名：0；
左：0；
宽度：7%；
边框：1px纯红；
身高：100%；
背景：浅蓝色；
颜色：白色；
}
.圆圈{
宽度：50px；
高度：50px；
浮动：对；
边界半径：100%；
背景：绿色；
利润率最高：-7%；
线高：50px；
文本对齐：居中；
颜色：黑色！重要；
}

p
{{n.number}
{{n.name}

650

这是一张“Facebook”风格的卡片。标题是从缩略图列表项创建的，内容来自由图像和段落文本组成的卡片正文。页脚由卡页脚内向左对齐的选项卡和图标组成。

谢谢您的回答。但我有一个问题，当我单击第一行时，它会展开。当单击第二行时，它也会展开，但同时第一行应该会关闭。换句话说，一次只能展开一行