Estoy tratando de hacer que cuando le de click
en el botton
maximizar al div
numero 2 realice un scroll
hacia abajo y coloque el div en la parte superior con un padding-top: 50px;
y así sucesivamente con los otros elementos, la idea es que haga scroll
y ubique estos elementos en la parte superior de la pantalla.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.items = [
{
"idUnidad": 1,
"idIdentidad": 1,
"Nombre": "Quito"
},
{
"idUnidad": 2,
"idIdentidad": 1,
"Nombre": "Guayaquil"
},
{
"idUnidad": 3,
"idIdentidad": 2,
"Nombre": "Cochabamba"
},
{
"idUnidad": 4,
"idIdentidad": 2,
"Nombre": "La paz"
},
{
"idUnidad": 5,
"idIdentidad": 3,
"Nombre": "Cusco"
}
];
$scope.addAactiveToItem = function(item) {
item.active = true;
$scope.activate = true;
}
$scope.minItem = function(item) {
item.active = false;
}
});
.container-div {
background-color: red;
width: 300px;
height: 150px;
margin: 15px;
}
.expanded-div {
height: 400px;
width: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<div ng-repeat="item in items track by $index" style="padding: 15px;">
<div class="container-div" ng-class="{'expanded-div': item.active}">
<h1>{{ item.idUnidad }}</h1>
<button class="btn btn-primary" ng-click="addAactiveToItem(item);" ng-if="!item.active">Maximizar este div</button>
<button class="btn btn-primary" ng-click="minItem(item);" ng-if="item.active">Minimizar</button>
</div>
</div>
</div>
</body>
</html>