Angularjs 如果选择了另一行则隐藏行

Question

我有一个 html/angularjs table 包含 ff :

 <tbody ng-repeat="x in Persons">
                    <tr>
                        <td>{{x.FirstName}}</td>
                        <td>{{x.LastName}}</td>
                        <td>{{x.Department}}</td>                           
                        <td>
                            <a href"#" data-ng-click="x.show = !x.show">
                             Sales Details
                            </a>

                        </td>
                    </tr>
                    <tr>
                     <td ng-show="x.show">
                        <!--user sales details here-->
                     </td>
                    </tr>
    </tbody>

目前，如果我点击第一行，它会显示详细信息，但我需要再次点击它才能隐藏它。如果单击第二行，我想隐藏第一行的详细信息。我该怎么做？

Answer 1

你需要一个方法

看看 https://stackblitz.com/edit/js-tv6dog?file=index.js

js:

$scope.clicked = function(index){
 let currentOption=$scope.Persons[index].show;
 $scope.Persons.forEach(x=>x.show=false);
 $scope.Persons[index].show=!currentOption;
}

html

<td>
  <a href"#" data-ng-click="clicked($index)">
  Sales Details
 </a>
</td>

当然还有添加 track by 到 ng-repeat

<tbody ng-repeat="x in Persons track by $index">

Answer 2

试试这个。我希望这正是您想要的。

var app = angular.module("app", []);
app.controller("name", function($scope) {
 $scope.Persons=[{"FirstName":"Ramesh","show":false},{FirstName:"Suresh","show":false}];
 $scope.showorhide = function(index){
 var currentOption=$scope.Persons[index].show;
  $scope.Persons.forEach(x=>x.show=false);
  $scope.Persons[index].show=!currentOption;
}
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="name">
<table>
<tbody ng-repeat="x in Persons">
                    <tr>
                        <td>First Name</td>                   
                        <td>
                            <a href"#/" style="color:red" ng-click="showorhide($index)">
                           open/close
                            </a>

                        </td>
                    </tr>
                    <tr ng-show="x.show">
                     <td >
                        {{x.FirstName}}
                     </td>
                    </tr>
    </tbody>
    </table>
</div>

Angularjs 如果选择了另一行则隐藏行

Angularjs hide row if another row is selected

show

hide

angularjs