Question

我希望在每次单击按钮时动态显示和隐藏表格行详细信息，但每次单击span glyphonic图标时，默认情况下都会打开所有详细信息数据。我应该更改什么才能显示这个数据仅适用于我点击过的那些元素？（在我的情况下，我需要只显示用户点击的某些数据）：

recyclerView.scrollToPosition(items.size() - 1);

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>

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

1 个答案: