javascript - 点击时动态显示和隐藏某些原始详细数据？

Question

我想在每次单击按钮时动态显示和隐藏表格行详细信息，但是每次单击 span glyphonic 图标时，所有 tr 的详细信息数据都是默认打开的。我应该更改什么以使这些数据仅对我单击的那些元素可见？（在我的情况下，我需要只显示用户点击的某些数据）：

<form role="form">
<script  cam-script type="text/form-script">
$scope.selectedRow = null;
   var  persons = $scope.persons = [
        {
           "id": 1,
           "name": "name1",
           "age":"454",
           "description":"this is  simple name"

       } ,
       {
           "id": 2,
           "name": "name2",
            "age":"4543",
           "description":"this is  simple name"

       },
      {
           "id": 3,
           "name": "name2",
            "age":"4543",
           "description":"this is  simple name"

       }
       ];
   camForm.on('form-loaded', function() {
          camForm.variableManager.createVariable({
            name: 'persons',
            type: 'Array',
            value: persons
          });
 });



$scope.pageNumber = 0;
$scope.IsHidden=true;;
    $scope.setPageNumber = function(index) {
        $scope.pageNumber = index;
          $scope.IsHidden = $scope.IsHidden ? false : true;
    }
</script>


<div class="container">
<table class="table table-condensed" style="border-collapse:collapse;">

    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>&nbsp;</th>
        </tr>
    </thead>

    <tbody ng-repeat="item in persons " >
       <tr >
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td><button class="btn btn-default btn-xs"  ><span class="glyphicon glyphicon-eye-open" ng-class="{$index == pageNumber }" ng-click="setPageNumber($index)($index)"></span></button></td>
        </tr>
         <tr ng-hide="IsHidden">
            <td>

    <label for="id" class="control-label">details</label>
     <div class="controls">
      <input id="description" class="form-control" type="text" ng-model="item.description" required  readonly/>
    </td>
        </tr>
    </tbody>
</table>
</div>
</form>  

Answer 1

这是您要查找的代码

var myApp = angular.module('myApp',[]);

myApp.controller('myController', ['$scope', function($scope) {
  $scope.persons = [
        {
           "id": 1,
           "name": "name1",
           "age":"454",
           "description":"this is  simple name1"

       } ,
       {
           "id": 2,
           "name": "name2",
            "age":"4543",
           "description":"this is  simple name2"

       },
      {
           "id": 3,
           "name": "name2",
            "age":"4543",
           "description":"this is  simple name3"
       }
       ];
    $scope.toggle = function (index){
    if($scope.persons[index].hidethis == undefined){
    	$scope.persons[index].hidethis = true;
    }else{
    	$scope.persons[index].hidethis = !$scope.persons[index].hidethis;
    }    	
    }
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form ng-app="myApp" ng-controller="myController">
<table class="table table-condensed" style="border-collapse:collapse;">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>&nbsp;</th>
        </tr>
    </thead>

    <tbody ng-repeat="item in persons">
       <tr>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td><button class="btn btn-default btn-xs" ng-click="toggle($index)"></button></td>
        </tr>
         <tr id="{{hideid + $index}}" ng-show="item.hidethis">
            <td>
    <label for="id" class="control-label">details</label>
     <div class="controls">
      <input id="description" class="form-control" type="text" ng-model="item.description" required  readonly/>
      </div>
    </td>
        </tr>
    </tbody>
</table>
</form>