Javascript ng重复且ng滚动条不'；我们不能一起工作_Javascript_Html_Angularjs_Scrollbar_Ng Repeat

Javascript ng重复且ng滚动条不'；我们不能一起工作

javascript html angularjs

Javascript ng重复且ng滚动条不'；我们不能一起工作,javascript,html,angularjs,scrollbar,ng-repeat,Javascript,Html,Angularjs,Scrollbar,Ng Repeat,我刚刚启动Angular JS，试图在列表中添加一个元素时显示一个滚动条，该元素将填充到内容框中。我从这里安装了ng滚动条 <link rel="stylesheet" href="../dist/ng-scrollbar.min.css" > <style> .scrollme { max-height: 100px; } </style> </head> <body> <div ng

我刚刚启动Angular JS，试图在列表中添加一个元素时显示一个滚动条，该元素将填充到内容框中。我从这里安装了ng滚动条

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

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>

这是我代码的一部分，所以可能没有完全意义。但它的工作方式是，如果我按下addImageButton，它将添加一行，这将在web上添加一行。相反，removeImageButton将删除一行，该行将立即显示在web上。我需要一个滚动条出现，一旦它达到100像素的高度。我核对了最后一个答案

也一样，但不起作用。如果我能得到详细解释方面的帮助，那就太好了。：）谢谢

明白了！我需要将广播方法放入addRow和removeRow方法中。此外，我还必须从事件传递的

中的文档重建中删除。尝试添加：$scope.$broadcast（'rebuild:me'）；在添加和删除行的末尾function@Silvinus是的，我有！：）

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