Una sugerencia, es dejar tu elemento al que le estás aplicando el atributo ng-repeat
, dentro de un contenedor con un alto fijo y scroll vertical.
De esa manera, sin importar cuantos elementos estén repitiéndose, puedes poner tu elemento objetivo tanto arriba como abajo del contenedor con scroll, y ahí se va a mantener, en esa posición.
Mencionaste también en los comentarios sobre poner tu elemento objetivo al medio del contenedor con scroll, pero no es recomendable, porque en primer lugar se rompe el orden establecido del menú dropdown, y en segundo lugar obstaculiza la selección de los elementos dentro del contenedor con scroll.
HTML
<ul class="dropdown-menu dropdown-aviso">
<!-- Aquí puede ir tu elemento "Ir a avisos" -->
<!-- Contenedor -->
<div class="notifications-size">
<!-- Elemento con ng-repeat -->
<li ng-repeat="notification in notificationData " ng-click="goToNotifications()" href="#">
<div>
...
</div>
</li>
</div>
<!-- Aquí puede ir tu elemento "Ir a avisos" -->
</div>
CSS
.notifications-size {
height: 100px; /* Aquí definí una altura de 100px, pero puedes probar con otras */
overflow-y: scroll;
}
Aquí lo puedes ver en acción. Al contenedor le puse un poco de estilo CSS adicional para que se vea más asemejado a una lista como la que tienes en las imágenes.
const app = angular.module('myApp', []);
app.controller('myController', ['$scope', function($scope) {
/* En el controlador estoy definiendo solamente propiedades de prueba */
$scope.numNotifications = 3;
/* En el caso concreto de las notificaciones, la estoy emulando con un arreglo de strings.
Si lo necesitas puedes jugar con esta propiedad reemplazando los strings por objetos.*/
$scope.notificationData = ['Uno', 'Dos', 'Tres', 'Cuatro', 'Cinco', 'Seis', 'Siete', 'Ocho', 'Nueve', 'Diez', 'Once'];
$scope.goToNotifications = function() {
console.log('goToNotifications()');
};
}]);
.pt-1 {
padding-top: 1rem;
}
.notifications-size {
height: 100px;
overflow-y: scroll;
}
.notifications-size li>* {
border-bottom: 1px solid #ddd;
}
.notifications-size a:hover {
color: #333;
background-color: #eee;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myController" class="container pt-1">
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
<span class="badge badge-danger badge-counter" ng-show="numNotifications > 0">{{numNotifications}}</span>
</a>
<ul class="dropdown-menu dropdown-aviso">
<!-- Aquí también puedes ubicar tu elemento "Ir a avisos" -->
<div class="notifications-size">
<li ng-repeat="notification in notificationData " ng-click="goToNotifications()">
<div>
{{notification}}
</div>
</li>
</div>
<!-- En este snippet tengo el elemento objetivo abajo del elemento con scroll, pero si lo deseas lo puedes cambiar arriba de él -->
<li>
<a class="text-center" href="#/">
<strong>Ir a avisos</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
ng-repeat
con el resto de los elementos. Con lo del CSS no te va a servir porque estás haciendo que tu elemento que fijo no en el menú dropdown. sino que en la ventana. De nuevo, todo esto es preliminar porque no tienes tu código aquí, así que lo que te recomiendo es que lo agregues a la pregunta para que se entienda gráficamente tu problema.<li>
con "Ir a avisos" aparezca siempre, porque tal cuál como está planteado en tu código, es un elemento estático, que va a aparecer sin importar cuantos elementos estés repitiendo en tu elemento<li>
con el atributong-repeat
.ng-repeat
. Todos esos elementos van a estar en una especie de scroll vertical dentro del mismo menú dropdown, y lo que quieres, es que a todo caso, el elemento que dice "Ir a avisos" esté después de esos elementos, al final de ese mismo menú dropdown.