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

有2个问题

您需要在数组中的每个项目中使用一个item-body / item tabs，在ng-repeat之外的代码中，因此只有一组。{li>为了解决这个问题，我已将ng-repeat移到了一层
由于您希望一次只显示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>

为什么行点击事件无法正常工作？

1 个答案: