Я работаю над проектом angularJS.

У меня есть такой код:

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}
]}
<!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>

Когда я нажимаю эту кнопку:

enter image description here

Строка расширена, я могу развернуть несколько строк.

Мой вопрос, как я могу изменить приведенный выше код, чтобы развернуть не более одной строки (например: если строка номер один расширена, и я нажимаю строку номер пять, строка номер один становится нерасширенной, а строка номер 5 расширяется)?

1
Michael 17 Окт 2015 в 20:18

3 ответа

Лучший ответ

Вы можете сравнить ctr.showReview с текущим индексом строки. Также здесь удобно использовать директивы ngRepeatStart/End:

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

Полный код:

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}
  ];
}
.details {background: #EEE;}
<!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>
3
dfsq 17 Окт 2015 в 17:31

Вы можете добиться этого, назначив переменную 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;
  })
}
1
Icycool 17 Окт 2015 в 17:30

Вот работает 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>
2
Venkat 17 Окт 2015 в 17:55