Angularjs скрыть строку, если выбрана другая строка - PullRequest
Новая
       12

Angularjs скрыть строку, если выбрана другая строка

0 голосов
/ 27 апреля 2018

У меня есть таблица html / angularjs, которая содержит 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>

В настоящее время, если я нажимаю на первый ряд, он показывает детали, но мне нужно щелкнуть его снова, чтобы скрыть. Я хочу скрыть детали первого ряда, если щелкнуть по второму ряду. Как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 27 апреля 2018

Попробуй это. Я надеюсь, что именно то, что вы хотите. 

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>
0 голосов
/ 27 апреля 2018

вам нужен метод для этого

посмотрите https://stackblitz.com/edit/js-tv6dog?file=index.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>

и, конечно, добавить трек к ng-repeat 

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