Bootstrap 替换面板内容

Question

我有一个使用 Bootstrap 创建的面板。该面板包含一个项目列表，项目详细信息存储在项目本身的隐藏 div 中。

单击列表项时，我想将整个面板内容替换为单击项的详细信息 div 的内容。

我还需要在单击 "Back to List" link 时恢复到列表视图。

显然，我需要创建一个 javascript 函数来执行此操作，因为我假设 Bootstrap 中没有任何东西可以处理此问题。

最好的方法是什么？

  <div class="col-md-4 col-sm-6">
       <div class="panel panel-default">
           <div class="panel-heading"><a href="#" class="pull-right">Back to List</a> <h4>Symmetric Keys</h4></div>
           <div class="panel-body">
               <div>Item 1
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 2
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 3
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 4
                   <div class="hidden">This is the rest of the data</div>
               </div>
               <div>Item 5
                   <div class="hidden">This is the rest of the data</div>
               </div>
           </div>
       </div>
   </div>

我在这里创建了一个示例：

http://www.bootply.com/y84ZiHTQ5W

Answer 1

HTML

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="app.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link  href="style.css" rel="stylesheet" />
  </head>
  <body>

<div ng-controller="showhideCtrl">

  <div class="panel panel-default">
    <!-- Default panel contents -->
    <div class="panel-heading">Panel heading</div><button class="btn btn-default " ng-show="hidevar" ng-click= "hidevar=false">Back</button>


    <!-- List group -->
    <ul class="list-group" ng-hide="hidevar" >
      <li class="list-group-item" ng-repeat="item in items" ng-click="showdes(item)"><a>{{item.title}}</a> </li>
    </ul>


    <div class="panel-body" ng-show="hidevar">
      {{itemdesc.content}}
    </div>
  </div>

</div>
  </body>
</html>

Angular

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('showhideCtrl', function ($scope) {

 $scope.items = [
    {
      title: 'Header - 1',
      content: 'Dynamic Group Body - 1'
    },
    {
      title: ' Header - 2',
      content: 'Dynamic Group Body - 2'
    },
    {
      title: ' Header - 3',
      content: 'Dynamic Group Body - 3'
    }
  ];

  $scope.showdes = function(item){

    $scope.itemdesc=item;
    $scope.hidevar=true;
  }


});

帕伦卡

http://plnkr.co/edit/LGJxQl2EVXKjjczkdipO?p=preview

Bootstrap 替换面板内容

Bootstrap replace panel contents

panel

show-hide

twitter-bootstrap

twitter-bootstrap-3