ng-repeat와 ng-scrollbar가 함께 작동하지 않습니다.

방금 Angular JS를 시작했고 내용 상자에 채워지는 목록에 요소를 추가 할 때 스크롤 막대가 나타나려고합니다. 여기에서 ng-scrollbar를 설치했습니다. https://github.com/asafdav/ng-scrollbar ng-repeat와 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>

자바 스크립트 :

(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 의 마지막 답을 확인했지만 작동하지 않았습니다. 자세한 설명으로 도움을 얻을 수 있다면 좋을 것입니다. :) 감사!

출처

2016-07-27 Eugenia Kim

이벤트가 전달한 문서 재구성 중. 다음을 추가하십시오 : $ scope. $ broadcast ('rebuild : me'); 추가 및 행 기능이 끝날 때 – Silvinus

@ 실비누스 예! :) –

알아 냈어! 브로드 캐스트 메서드를 addRow 및 removeRow 메서드에 넣어야합니다. 또한 밖으로 나가야했다.

출처

2016-07-27 16:28:56

ng-repeat와 ng-scrollbar가 함께 작동하지 않습니다.

답변

관련 문제