Question

我在开发angularJS项目。

我有这段代码：

＆＃13;

var app = angular.module('plunker', [])
.controller('MenuController', MenuController);

function MenuController() {
   this.showReview = true; 
   this.objects = [
  {name:'John', age:25, gender:'boy', Id:0},
  {name:'Jessie', age:30, gender:'girl', Id:1},
  {name:'Johanna', age:28, gender:'girl', Id:2},
  {name:'Joy', age:15, gender:'girl', Id:3},
  {name:'Mary', age:28, gender:'girl', Id:4},
  {name:'Peter', age:95, gender:'boy', Id:5},
  {name:'Sebastian', age:50, gender:'boy', Id:6},
  {name:'Erika', age:27, gender:'girl', Id:7},
  {name:'Patrick', age:40, gender:'boy', Id:8},
  {name:'Samantha', age:60, gender:'girl', Id:9}
]}

＆＃13;

<!DOCTYPE html>
<html data-ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>  
  </head>

  <body ng-controller="MenuController as ctrl">
    <table class="table table-responsive table-hover">
        <thead>
            <tr><th>Site Type</th></tr>
        </thead>
        <tbody ng-repeat="object in ctrl.objects track by object.Id">
            <tr>
                <td ng-bind="object.name"></td>
                <td>
 <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-camera"></i></a>
                    <a class="btn btn-default btn-xs" ><i class="glyphicon glyphicon-info-sign"></i></a>
                    <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-screenshot"></i></a>
<a class="btn btn-default btn-xs" ng-click="showReview = !showReview;">
<i class="glyphicon glyphicon-list-alt"></i>
           </a>
    
           </a>
           
           </td>
            </tr>
            <tr ng-if="showReview">
                <td colspan="2">dummy!</td>
            </tr>
        </tbody>
    </table>
  </body>

</html>

＆＃13;

当我按下此按钮时：

该行已展开，我可以展开多行。

我的问题如何更改上面的代码，使其不超过一行进行扩展（例如：如果第一行展开，我按第五行，第一行未展开，第五行展开）？

Answer 1

您可以将ctr.showReview与当前行索引进行比较。在这里使用ngRepeatStart/End指令也很方便：

<tr ng-repeat-end ng-if="ctrl.showReview == $index" class="details">
    <td colspan="2">dummy!</td>
</tr>

完整代码：

＆＃13;

angular.module('plunker', []).controller('MenuController', MenuController);

function MenuController() {
  this.objects = [
    {name:'John', age:25, gender:'boy', Id:0},
    {name:'Jessie', age:30, gender:'girl', Id:1},
    {name:'Johanna', age:28, gender:'girl', Id:2},
    {name:'Joy', age:15, gender:'girl', Id:3},
    {name:'Mary', age:28, gender:'girl', Id:4},
    {name:'Peter', age:95, gender:'boy', Id:5},
    {name:'Sebastian', age:50, gender:'boy', Id:6},
    {name:'Erika', age:27, gender:'girl', Id:7},
    {name:'Patrick', age:40, gender:'boy', Id:8},
    {name:'Samantha', age:60, gender:'girl', Id:9}
  ];
}

＆＃13;

.details {background: #EEE;}

＆＃13;

<!DOCTYPE html>
<html data-ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MenuController as ctrl">
  <table class="table table-responsive table-hover">
    <thead>
      <tr>
        <th colspan="2">Site Type</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="object in ctrl.objects track by object.Id">
        <td ng-bind="object.name"></td>
        <td>
          <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-camera"></i></a>
          <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-info-sign"></i></a>
          <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-screenshot"></i></a>
          <a class="btn btn-default btn-xs" ng-click="ctrl.showReview = ctrl.showReview == $index ? -1 : $index;">
            <i class="glyphicon glyphicon-list-alt"></i>
          </a>
        </td>
      </tr>
      <tr ng-repeat-end ng-if="ctrl.showReview == $index" class="details">
        <td colspan="2">dummy!</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

＆＃13;

Answer 2

这里正在运行plunk .. http://embed.plnkr.co/doCGFxyDKPzbpn0NtnWa/preview

var app = angular.module('plunker', [])
.controller('MenuController', MenuController);

function MenuController() {
   this.showReviewID = -1; 
   this.objects = [
  {name:'John', age:25, gender:'boy', Id:0},
  {name:'Jessie', age:30, gender:'girl', Id:1},
  {name:'Johanna', age:28, gender:'girl', Id:2},
  {name:'Joy', age:15, gender:'girl', Id:3},
  {name:'Mary', age:28, gender:'girl', Id:4},
  {name:'Peter', age:95, gender:'boy', Id:5},
  {name:'Sebastian', age:50, gender:'boy', Id:6},
  {name:'Erika', age:27, gender:'girl', Id:7},
  {name:'Patric;k', age:40, gender:'boy', Id:8},
  {name:'Samantha', age:60, gender:'girl', Id:9}
]};

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="style.css" rel="stylesheet" />
    <script data-semver="1.4.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-require="angular.js@1.4.x"></script>
    <script src="app.js"></script>  
  </head>

  <body ng-controller="MenuController as ctrl">
    <table class="table table-responsive table-hover">
        <thead>
            <tr><th>Site Type</th></tr>
        </thead>
        <tbody ng-repeat="object in ctrl.objects track by object.Id">
            <tr>
                <td ng-bind="object.name"></td>
                <td>
 <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-camera"></i></a>
                    <a class="btn btn-default btn-xs" ><i class="glyphicon glyphicon-info-sign"></i></a>
                    <a class="btn btn-default btn-xs"><i class="glyphicon glyphicon-screenshot"></i></a>
<a class="btn btn-default btn-xs" ng-click="$parent.showReviewID = object.Id;">
<i class="glyphicon glyphicon-list-alt"></i>
           </a>
           </td>
            </tr>
            <tr ng-if="showReviewID==object.Id">
                <td colspan="2">dummy!</td>
            </tr>
        </tbody>
    </table>
  </body>

</html>

Answer 3

您可以通过将showReview变量分配给相应的ng-repeat对象而不是ng-repeat内部范围来实现。打开一个时，回调控制器以关闭其他控制器。

<tbody ng-repeat="object in ctrl.objects track by object.Id">
  <a class="btn btn-default btn-xs" ng-click="object.showReview = !object.showReview; closeOthers(object)">

  <tr ng-if="object.showReview">
    <td colspan="2">dummy!</td>
  </tr>

$scope.closeOthers = function(object) {
  if (!object.showReview) return; // no need to run if this is a closing action

  angular.forEach($scope.ctrl.objects, function(value) {
    if (value != object) object.showReview = false;
  })
}

如何只在表格中扩展一行？

3 个答案: