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替換面板內容

回答

相關問題