单击AngularJS按钮时如何滚动答案

【问题标题】：How to scroll when I click on an AngularJS button单击AngularJS按钮时如何滚动
【发布时间】：2019-01-30 05:25:33
【问题描述】：

当我单击button 以最大化div 数字2 向下滚动并将div 与padding-top: 50px; 等放在顶部时，我正在尝试这样做是 scroll 并将这些元素放在屏幕顶部。

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>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

我希望我正确地理解了你。我写了一些代码，测试一下，如果不是你想要的，给我打电话

这是你的控制器：

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {

/*ADDING A ORDER ATTRIBUTE SO YOU CAN ORDER BY IT*/
$scope.items = [
  {
    "idUnidad": 1,
    "idIdentidad": 1,
    "Nombre": "Quito",
    "Order": 1
  },
  {
    "idUnidad": 2,
    "idIdentidad": 1,
    "Nombre": "Guayaquil",
    "Order": 2
  },
  {
    "idUnidad": 3,
    "idIdentidad": 2,
    "Nombre": "Cochabamba",
    "Order": 3
  },
  {
    "idUnidad": 4,
    "idIdentidad": 2,
    "Nombre": "La paz",
    "Order": 4
  },
  {
    "idUnidad": 5,
    "idIdentidad": 3,
    "Nombre": "Cusco",
    "Order": 5
  }
];   

$scope.addAactiveToItem = function(item) {
  item.active = true;
  $scope.activate = true;

  var index = $scope.items.indexOf(item); //GETTING THE INDEX OF THE ITEM YOU CLICKED ON THE ARRAY
  $scope.items.splice(index, 1); //REMOVING THIS ITEM FROM ITS CURRENT POSITION

  $scope.items.unshift(item); //PUTTING IT TO THE FIRST POSITION OF YOUR ARRAY

  window.scrollTo( 0, 0); //SCROLLING TO THE TOP (0,0)

}

$scope.minItem = function(item) {
  item.active = false;
}

}]);

这是您的 HTML，只是更改了 orderby 并通过 $index 删除了轨道，这在这种情况下不需要。

<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">
<link rel="stylesheet" type="text/css" href="../styles/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="../scripts/app.js" ></script>
<script src="../scripts/controller.js" ></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
 <div class="container">
    <div ng-repeat="item in items | orderBy: item.order" 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>

【讨论】：