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

Я думал об использовании именно этого. Любой шанс, что вы могли бы начать меня и показать мне, как сделать то же самое с помощью Angular :) – user1513388

Проверьте plnkr. – roxid

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

Работает отлично. Хороший и простой кикстарт для входа в Angularjs. – user1513388

Bootstrap заменить содержимое панели

ответ

Смежные вопросы