Bootstrap替换面板内容

我有一个使用Bootstrap创建的面板。该面板包含物品列表，其中物品详细信息存储在物品本身内的隐藏div中。Bootstrap替换面板内容

当单击列表项目时，我想用整个面板内容替换单击项目的细节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

来源

2015-03-24 user1513388

实施这一带角的js本来很多easier.Have你试着用角？ – roxid 2015-03-25 12:26:22

我正在考虑如何使用。任何机会，你可以踢开始我，并告诉我如何使用Angular相同:) – user1513388 2015-03-25 13:43:41

看看plnkr。 – roxid 2015-03-27 06:32:42

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

来源

2015-03-27 06:32:22 roxid

不错 - 谢谢。我现在就试试这个。 – user1513388 2015-03-27 12:06:58

完美的作品。好的和简单的kickstart进入Angularjs。 – user1513388 2015-03-27 12:08:56

Bootstrap替换面板内容

回答

相关问题