關於AngularJS和數據表的組合

我最近一直在學習AngularJS和Web開發，因爲我工作，所以我爲我的新手道歉。我偶然發現了一些關於與AngularJS數據集成的牆。這裏是它的結構：

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

我不得不提到我利用客戶端的過濾器，所以他們可以選擇正確的行。問題在於，在過濾一些用戶和使用數據錶行進行排序時，數據會在視圖上被神奇地複製，並且我無法刪除它或任何其他內容。爲了解決這個問題，我不得不拿出ng-repeat過濾器和支持數據過濾器的過濾器。有人知道可能會導致這種行爲嗎？

順便說一下我使用angularJS 1.x和數據表1.10

謝謝！

來源

2017-08-08 Juan Pablo Fernandez

您的數據是重複的，因爲您將它綁定兩次作爲HTML元素的屬性和句柄。在你的代碼刪除或者ng-model="..."屬性或{{...}}所以它看起來像這樣：

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

爲@Shaishab羅伊提到ng-model不應該與<span>工作，所以嘗試ng-bind來代替：

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

來源

2017-08-08 12:05:27 blewherself

'NG- model =「」'不適用於'span'標籤。你應該使用'ng-bind =「」' –

hm ...然後我很困惑如果'ng-model'不應該在那裏工作，數據是如何被複制的= \ – blewherself

我會採納這個建議，謝謝！正如我所說的那樣有點奇怪，因爲它只會在使用ng-repeat過濾器進行過濾之後發生，並且使用數據表進行行排序。我猜這是與濾波器有關的，因爲一旦我將它們拿出來並使用fnfilter（來自數據表），問題就解決了。 –

關於AngularJS和數據表的組合

回答

相關問題