代码之家 › 专栏 › 技术社区 › zerokira

如何在单击AngularJS按钮时滚动

angularjs css html javascript

zerokira · 技术社区 · 6 年前

当我点击 button div 数字2向下滚动并放置 部门 上面有一个 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>

1 回复 | 直到 6 年前

Arthur Paiva 6 年前

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

这是您的控制器:

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