Question

我在Angular有一个SPA。我有一个项目的数据网格。我希望当点击网格中的某个项目以使其具有特定的类时，然后将该项目滚动到封闭div的顶部。

请参阅此处的Plunkr：http://plnkr.co/edit/OSPJ5r3P9BHo8YKVtdTT?p=preview

我有应用类工作的代码，但是我无法将活动（应用了类'open'的元素）滚动到封闭div的顶部。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.cart = [];

  $scope.addToCart = function(index) {
    $scope.cart.push(index);

    $scope.cartCount = $scope.cart.length;
    alert($scope.cartCount);
  }


  $scope.activeRow = function(index) {
    $scope.selectedRow = index;

  }


  $scope.dataObject = [{
      "Number": "001",
      "Status": "NCB",
      "Compound": "CD19A"
    }, {
      "Number": "002",
      "Status": "NCA",
      "Compound": "CD19B"
    }, {
      "Number": "003",
      "Status": "NCR",
      "Compound": "CD33C"
    }, {
      "Number": "004",
      "Status": "NCX",
      "Compound": "CD33D"
    }, {
      "Number": "005",
      "Status": "NCT",
      "Compound": "CD33E"
    }, {
      "Number": "006",
      "Status": "NC9",
      "Compound": "CD20F"
    }, {
      "Number": "007",
      "Status": "NC8",
      "Compound": "CD20G"
    }, {
      "Number": "008",
      "Status": "NCX",
      "Compound": "CD20H"
    }, {
      "Number": "009",
      "Status": "NCY",
      "Compound": "CD33I"
    }, {
      "Number": "010",
      "Status": "NCT",
      "Compound": "CD33J"
    }

  ];



});

/* Put your css in here */

body {
  background: #eee;
}

div.cart {
  display: block;
  height: 70px;
  background: silver;
  margin-left: 20px;
  width: 200px;
  padding: 5px 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.cart h1 {
  color: #fff;
  line-height: 20px;
}

.item-list-wrapper {
  height: 300px;
  width: 740px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  margin-left: 20px;
}

.item-list {
  height: 70px;
  width: 100%;
  margin-bottom: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  background: #efefe4;
}

li {
  display: inline-block;
  list-style: none;
  padding: 0 40px 40px 40px;
  font-size: 24px;
}

.open {
  height: 300px;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
  <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-view=""></div>
  <div class="cart">
    <h1>Cart: {{cartCount}}</h1></div>


  <div class="item-list-wrapper">
    <div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
      <ul>
        <li>{{data.Number}}</li>
        <li>{{data.Status}}</li>
        <li>{{data.Compound}}</li>
        <li>
          <a href="" ng-click="addToCart()">Add to Cart</a>
        </li>
      </ul>
    </div>
  </div>
  <!--item-list-wrapper -->


</body>

</html>

Answer 1

看起来我可以使用$ anchorScroll使用锚ID移动到给定元素。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

  $scope.cart = [];

  $scope.addToCart = function(index) {
    $scope.cart.push(index);

    $scope.cartCount = $scope.cart.length;
    alert($scope.cartCount);
  }


  $scope.activeRow = function(index) {
    $scope.selectedRow = index;
	$location.hash();
	$anchorScroll('anchor-' + index);

  }


  $scope.dataObject = [{
      "Number": "001",
      "Status": "NCB",
      "Compound": "CD19A"
    }, {
      "Number": "002",
      "Status": "NCA",
      "Compound": "CD19B"
    }, {
      "Number": "003",
      "Status": "NCR",
      "Compound": "CD33C"
    }, {
      "Number": "004",
      "Status": "NCX",
      "Compound": "CD33D"
    }, {
      "Number": "005",
      "Status": "NCT",
      "Compound": "CD33E"
    }, {
      "Number": "006",
      "Status": "NC9",
      "Compound": "CD20F"
    }, {
      "Number": "007",
      "Status": "NC8",
      "Compound": "CD20G"
    }, {
      "Number": "008",
      "Status": "NCX",
      "Compound": "CD20H"
    }, {
      "Number": "009",
      "Status": "NCY",
      "Compound": "CD33I"
    }, {
      "Number": "010",
      "Status": "NCT",
      "Compound": "CD33J"
    }

  ];



});

＆＃13;

/* Put your css in here */

body {
  background: #eee;
}

div.cart {
  display: block;
  height: 70px;
  background: silver;
  margin-left: 20px;
  width: 200px;
  padding: 5px 10px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.cart h1 {
  color: #fff;
  line-height: 20px;
}

.item-list-wrapper {
  height: 300px;
  width: 740px;
  border: 1px solid #ddd;
  overflow-y: scroll;
  margin-left: 20px;
}

.item-list {
  height: 70px;
  width: 100%;
  margin-bottom: 10px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border: 1px solid #fff;
  background: #efefe4;
}

li {
  display: inline-block;
  list-style: none;
  padding: 0 40px 40px 40px;
  font-size: 24px;
}

.open {
  height: 300px;
  background: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js" data-semver="1.4.7"></script>
  <script data-require="angular.js@1.4.x" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular-messages.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div ng-view=""></div>
  <div class="cart">
    <h1>Cart: {{cartCount}}</h1></div>


  <div class="item-list-wrapper">
    <div class="item-list" ng-repeat="data in dataObject" ng-click="activeRow($index)" ng-class="{'open':$index == selectedRow}">
<a id="anchor-{{$index}}"></a>
      <ul>
        <li>{{data.Number}}</li>
        <li>{{data.Status}}</li>
        <li>{{data.Compound}}</li>
        <li>
          <a href="" ng-click="addToCart()">Add to Cart</a>
        </li>
      </ul>
    </div>
  </div>
  <!--item-list-wrapper -->


</body>

</html>

＆＃13;

AngularJS数据网格，在点击时滚动元素到封闭div的顶部

1 个答案: