ng-repeat und ng-scrollbar funktioniert nicht zusammen

Ich beginne gerade Angular JS und versuche, eine Bildlaufleiste erscheinen zu lassen, wie ich ein Element in der Liste hinzufügen, die in das Feld des Inhalts gefüllt werden würde. Ich habe ng-scrollbar von hier installiert. https://github.com/asafdav/ng-scrollbar ng-repeat und ng-scrollbar funktioniert nicht zusammen

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'); 
//  } 
//  }); 

    } 

})();

Es ist ein Teil meines Codes, damit es nicht voll Sinn machen könnte. Aber so wie es funktioniert, würde ich, wenn ich den addImageButton drücke, eine Zeile hinzufügen, die eine Zeile im Web hinzufügt. Umgekehrt löscht removeImageButton eine Zeile, die sofort im Web angezeigt wird. Ich brauche eine Bildlaufleiste, sobald sie die Höhe 100px erreicht. Ich überprüfte auch die letzte Antwort des ng-scrollbar is not working with ng-repeat , aber es hat nicht funktioniert. Wäre toll, wenn ich Hilfe bei der detaillierten Erklärung bekommen könnte. :) Vielen Dank!

Quelle

2016-07-27 Eugenia Kim

In Dokumentation Neuaufbau durch ein Ereignis übergeben. Versuchen Sie folgendes hinzuzufügen: $ scope. $ Broadcast ('rebuild: me'); am Ende der Zeile hinzufügen und entfernen Funktion – Silvinus

@Silvinus Ja, ich habe! :) –

Herausgefunden! Ich muss die Broadcast-Methode in addRow und removeRow-Methoden setzen. Außerdem musste ich das aus der

Quelle

2016-07-27 16:28:56

ng-repeat und ng-scrollbar funktioniert nicht zusammen

Antwort

Verwandte Themen