Bootstrap 替换面板内容答案

【问题标题】：Bootstrap replace panel contentsBootstrap 替换面板内容
【发布时间】：2015-05-28 09:48:33
【问题描述】：

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

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

单击“返回列表”链接时，我还需要返回列表视图。

显然，我需要创建一个 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

【问题讨论】：

用 Angular js 实现这一点会容易得多。你用 Angular 试过了吗？
我正在考虑使用它。任何机会你都可以让我开始并告诉我如何使用 Angular 做同样的事情:)
查看 plnkr。

标签： twitter-bootstrap twitter-bootstrap-3 panel show-hide

【解决方案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.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;
  }


});

Plnkr

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

【讨论】：

完美运行。进入 Angularjs 的不错且简单的启动程序。