Я пытаюсь отобразить результаты angularjs с правой стороны, используя css.Для этого я создал класс Css с именем Side-Bar.
Вот моя проблема:
при запуске кода angularjs, Css вызывает смешивание результата друг с другом, но если я отображу результат div каждого пользователя один за другим непосредственно в html, все будет в порядке, как показано в коде ниже
<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>