个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 02:52:52 26 4
gpt4 key购买 nike

我刚开始使用 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，它会添加一行，这将在网络上添加一行。相反，removeImageButton 将删除一行，该行将立即显示在网络上。一旦达到 100px 的高度，我需要出现一个滚动条。我检查了 ng-scrollbar is not working with ng-repeat 的最后一个答案也一样，但没有用。如果我能在详细解释方面得到一些帮助，那就太好了。 :) 谢谢!

最佳答案

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

关于javascript - ng-repeat 和 ng-scrollbar 不能一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38616060/

26 4 0
文章推荐： javascript - 使用 jQuery 跟踪输入和切换类
文章推荐： javascript - JQuery 多文件上传
文章推荐： javascript - 用简单的 jQuery 幻灯片替换静态背景图像
文章推荐： javascript - 右键单击执行 javascript 的 html 链接
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com