单击AngularJS按钮时如何滚动

Question

我试图使该button单击以最大程度地使div数字2向下滚动并使用padding-top: 50px;将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>

Answer 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>

单击AngularJS按钮时如何滚动

问题描述

1 个解决方案

解决方案1
0 2019-01-29 21:25:33

单击AngularJS按钮时如何滚动

问题描述

1 个解决方案

解决方案1 0 2019-01-29 21:25:33

解决方案1
0 2019-01-29 21:25:33