javascript - 为什么行点击事件在 Angular 上不能正常工作？

Question

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

这是我的代码

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


})

Answer 1

有两个问题

1. 你需要一个item-body/item tabs每个数组中的项目，在您的代码中ng-repeat 之外所以只有一套。为了解决这个问题，我移动了 ng-repeat上一层
2. 由于您一次只想显示 1 个项目，您可以选择基于索引的解决方案，如下所示

所以

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(index) {    
    $scope.toogle_item = $scope.toogle_item === index ? -1 :  index;
  }


})

.bg, .item.bg {
  background: lightgray;
  position: relative;
}
.ptag {
  position: absolute;
  top: 0;
  left: 0;
  width: 7%;
  border: 1px solid red;
  height: 100%;
  background: lightblue;
  color: white;
}
.circle {
  width: 50px;
  height: 50px;
  float: right;
  border-radius: 100%;
  background: green;
  margin-top: -7%;
  line-height: 50px;
  text-align: center;
  color: black!important;
}

<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>

<script src="http://code.ionicframework.com/contrib/ionic-contrib-swipecards/ionic.swipecards.js?v=5"></script>
<div ng-app="app">
  <div ng-controller="apptes">
    <div class="list card">

      <div ng-repeat="n in obj track by $index">
        <div class="item item-avatar bg" ng-click="clickrow($index)">
          <p class="ptag">P</p>
          <h2>{{n.number}}</h2>
          <p>{{n.name}}</p>
          <p class="circle">650</p>
        </div>
        <div ng-show="toogle_item === $index">
          <div class="item item-body">

            <p>
              This is a "Facebook" styled Card. The header is created from a Thumbnail List item, the content is from a card-body consisting of an image and paragraph text. The footer consists of tabs, icons aligned left, within the card-footer.
            </p>
            <p>
              <a href="#" class="subdued">1 Like</a>
              <a href="#" class="subdued">5 Comments</a>
            </p>
          </div>

          <div class="item tabs tabs-secondary tabs-icon-left">
            <a class="tab-item" href="#">
              <i class="icon ion-thumbsup"></i>
              Like
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-chatbox"></i>
              Comment
            </a>
            <a class="tab-item" href="#">
              <i class="icon ion-share"></i>
              Share
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>