我正在使用 Angular JS 和 Bootstrap 来显示一些动态数据，我目前将其平铺 3 个 div。但是我需要它平铺超过 3 个我需要它们更小，但是如果我使用较小的列大小我无法弄清楚 bottstrap 它只是每行放置一个或 2 个。我每行至少需要 7 个。另外，我让它们在点击时最大化的功能也不起作用，我不知道为什么......
这就是我现在所有的工作，除了设置 ngclick 我得到一个错误..
<html>
<head>
<title>Relic</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrolly.min.js"></script>
<link href="css/cover.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/social.js"></script>
<script>
$(document).ready(function() {
$('.hide_div').hide();
$('.show_button').click(function(){
/**
* when show button is clicked we call the show plugin
* which scales the box to default size
* You can try other effects from here: http://jqueryui.com/effect/
*/
$(".hide_div").show("scale", 500);
});
$('.show_button').click(function(){
//same thing happens except in this case we hide the element
$(".hide_div").hide("scale", 500);
});
});
</script>
</head>
<body ng-app="userProfile" ng-controller="ProfileController as post" >
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid" id="content">
<div class="row" >
<ul ng-repeat="post in post.userPost" class="col-md-1" id="post">
<li ng-click='tab = {{post.message}}' class='show_button'>{{post.title}}{{post.message}}</li>
</ul>
</div>
</div>
</div>
</div>
<div id='fullscreen' class='hide_div'>{{tab}}
<div class='show_button'>test</div></div>
</body>
</html>
这是我得到的错误
Error: [$parse:syntax] Syntax Error: Token 'post.message' is unexpected, expecting [:] at column 9 of the expression [tab = {{post.message}}] starting at [post.message}}].
http://errors.angularjs.org/1.3.0-beta.17/$parse/syntax?p0=post.message&p1=is%20unexpected%2C%20expecting%20%5B%3A%5D&p2=9&p3=tab%20%3D%20%7B%7Bpost.message%7D%7D&p4=post.message%7D%7D
at file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:78:12
at Parser.throwError (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10739:11)
at Parser.consume (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10773:12)
at Parser.object (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:11075:14)
at Parser.primary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10707:22)
at Parser.unary (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10958:19)
at Parser.multiplicative (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10941:21)
at Parser.additive (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10932:21)
at Parser.relational (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10923:21)
at Parser.equality (file:///C:/Users/TheLastOne/Desktop/Angular/js/angular.js:10914:21) <li ng-click="tab = {{post.message}}" class="show_button">
最佳答案
id 需要是唯一的，所以你想在任何循环或重复中使用的是 class，所以 class="post" 和 $('.post').click(..)。
要么那样，要么你会得到一堆乱七八糟的索引 ID，比如 id="post{{$index}}" id="fullscreen{{$index}}" 但这听起来并不有趣。
在这种情况下使用 ng-click 也更有意义。
这是一个Plunker
关于html - 使用 Bootstrap 水平平铺 Div 标签并在点击时最大化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25255117/