Question

我刚刚开始使用Angular JS并试图让滚动条出现，因为我在列表中添加了一个元素，该元素将填充在内容框中。我从这里安装了ng-scrollbar。 https://github.com/asafdav/ng-scrollbar

HTML：

  <link rel="stylesheet" href="../dist/ng-scrollbar.min.css" >
  <style>
    .scrollme {
      max-height: 100px;
    }
  </style>
</head>
<body>

<div ng-app="DemoApp">
  <div class="container" ng-controller="DemoController">
    <table border="0" width="100%">
        <div class="scrollme" ng-scrollbar rebuild-on="rebuild:me" is-bar-shown="barShown">
            <tr>
                <th width="2%"></th>
                <th width="14%">Name</th>
                <th width="85%">Address</th>
            </tr>
            <tr>
                <td>
                    <img src="addImageButton.png" ng-click="addRow()" />
                </td>
                <td class="inlineBlock">
                    <input type="text" ng-model="row.name" />
                </td>
                <td>
                    <input ng-model="row.addr" />
                </td>
            </tr>


            <tr ng-repeat="row in rowList">
              <td>
                <img src="removeImageButton.png"ng-click="removeRow($index)" />
              </td>
              <td>{{row.name}}</td>
              <td>{{row.client}}</td>
            </tr>
        </div>
      </table>
  </div>
 </div>
</body>

JavaScript的：

(function () {
  'use strict';

  var app = angular.module('DemoApp', ['ngScrollbar']);
  app.controller('DemoController', DemoController);
  function DemoController($scope) {
    // portfolio and broker tabs
    $scope.row = {}
    $scope.row.name = "";
    $scope.row.addr = "";
    $scope.rowList = [];

    // adding a row to list
    $scope.addRow = function() {
      var data = {};
      data.name = $scope.row.name;
      data.addr = $scope.row.addr;
      $scope.rowList.push(data);
      $scope.row.name = "";
      $scope.row.addr = "";
      console.log($scope.rowList);
    }

    // removing a row from the list
    $scope.removeRow = function(obj) {
      console.log('end' + $scope.rowList);
      if(obj != -1) {
        $scope.rowList.splice(obj, 1);
      }
    }

    $scope.$on('scrollbar.show', function(){
        console.log('Scrollbar show');
      });

      $scope.$on('scrollbar.hide', function(){
        console.log('Scrollbar hide');
      });

//      $scope.$on('loopLoded', function(evt, index) {
//        if(index == $scope.me.length-1) {
//            $scope.$broadcast('rebuild:me');
//        }
//      });

  }

})();

这是我的代码的一部分，所以它可能不完全有意义。但它的工作方式是，如果我按下addImageButton，它会添加一行，在web上添加一行。相反，removeImageButton将删除一个将立即显示在Web上的行。一旦达到100px的高度，我需要一个滚动条。我检查了ng-scrollbar is not working with ng-repeat的最后一个答案同样但它没有奏效。如果我能得到一些详细解释的帮助，那将会很棒。 :)谢谢！

Answer 1

想通了！我需要将广播方法放在addRow和removeRow方法中。另外，我不得不把它从

中拿出来

ng-repeat和ng-scrollbar不能一起工作

1 个答案: