In Bezug auf AngularJS und datable Kombination

Question

In erster Linie, hallo! Ich bin neu hier.

Ich habe vor kurzem AngularJS und Webentwicklung gelernt, während ich arbeite, also entschuldige ich mich für meine Neuigkeit. Ich war auf eine Art Mauer gestoßen, die die Integration von Daten mit AngularJS betrifft. Hier ist die Struktur davon:

   <table class="datatable table table-hover"> 
       <thead> 
        <tr> 
         <th ng-repeat="column in columns">   
          {{column.name}} 
         </th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr ng-repeat="form in forms | filter : {userName : activeFilter['user name']|rangeDate:activeFilter['range begin']:activeFilter['range end']:'birthDate'"> 
         <td class="row-md-1"> 
          <span ng-model="approvedForm.userName"> 
           {{approvedForm.userName}} 
          </span> 
         </td> 
         <td class="row-md-1"> 
          <span ng-model="approvedForm.birthDate"> 
           {{approvedForm.birthDate}} 
          </span> 
         </td> 
        </tr> 
       </tbody> 
      </table> 

Ich habe zu erwähnen, ich Verwendung der Filter auf der Client-Seite zu machen, damit sie die richtigen Zeilen wählen. Das Problem bestand darin, dass beim Filtern einiger Benutzer und der Zeilensortierung mit Datentabelle die Daten in der Ansicht mysteriös dupliziert wurden und ich sie nicht löschen konnte. Um es zu lösen, musste ich die ng-Repeat-Filter herausnehmen und mit datatabler Filterunterstützung filtern. Weiß jemand, was dieses Verhalten verursacht haben könnte?

Btw Ich bin mit AngularJS 1.x und Datatable 1.10

Dank!

Answer 1

Ihre Daten duplizieren, weil Sie es zweimal als Attribut des HTML-Elements und mit Lenker binden. Entfernen Sie entweder ng-model="..." Attribut oder {{...}} in Ihrem Code, so dass es würde wie folgt aussehen:

<span> 
    {{approvedForm.userName}} 
</span> 

als @Shaishab Roy ng-model erwähnt soll nicht mit <span> arbeiten, so versuchen ng-bind statt:

<span ng-bind="approvedForm.userName"></span>