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>
我在这里创造一个例子:
答
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
+0
不错 - 谢谢。我现在就试试这个。 – user1513388 2015-03-27 12:06:58
+1
完美的作品。好的和简单的kickstart进入Angularjs。 – user1513388 2015-03-27 12:08:56
实施这一带角的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