Css导致Angularjs动态div结果到Jam
Css导致Angularjs动态div结果到Jam
提问于 2019-02-24 15:19:23
我试图使用css在右侧显示angularjs结果。为此，我创建了一个名为Side Bar.的Css类。
这里是我的问题：
当我运行angularjs代码时，Css会导致结果被彼此阻塞，但是如果我在html中一个接一个地显示每个用户的结果div，那么按照下面的代码就可以了。
<li style="list-style:none;">
<div class="sidebar" >
<div id="sidebar-user-box1">User 1</div>
<div id="sidebar-user-box1">User 2</div>
<div id="sidebar-user-box1">User 3</div>
<div id="sidebar-user-box1">User 4</div>
</div>
</li>
角J：：
Css会导致angularjs结果在显示时被阻塞。(注意:如果我删除css，将显示angularjs结果，但在右边没有css定位)
<!doctype html>
<html ng-app="myapp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.arr = [{
name: "user 1 Angualrjs"
},
{
name: "User 2 Angualrjs"
},
{
name: "user 3 Angualrjs"
},
{
name: "User 4 Angualrjs"
}
];
$scope.collapseIt = function(id) {
$scope.collapseId = ($scope.collapseId == id) ? -1 : id;
}
});
</script>
<style>
.sidebar {
width: 250px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
}
</style>
</head>
<body ng-controller="MainCtrl">
<li style="list-style:none;" ng-repeat='ret in arr'>
<div class="sidebar">
<div> {{ret.name}}</div><br>
</div>
</li>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-24 15:31:57
您的sidebar应该是侧边栏ul的包装器--请参阅我对代码所做的标记更改：
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.arr = [{
name: "user 1 Angualrjs"
},
{
name: "User 2 Angualrjs"
},
{
name: "user 3 Angualrjs"
},
{
name: "User 4 Angualrjs"
}
];
$scope.collapseIt = function(id) {
$scope.collapseId = ($scope.collapseId == id) ? -1 : id;
}
});.sidebar {
width: 250px;
position: fixed;
height: 100%;
right: 0px;
top: 0px;
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid #b2b2b2;
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<div class="sidebar" ng-app="myapp" ng-controller="MainCtrl">
<ul>
<li style="list-style:none;" ng-repeat='ret in arr'>
{{ret.name}}
</li>
</ul>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54853372
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号