2016-02-01 27 views
0

我有一張表。每一行都有從數據庫排序值:用jQuery修改後寫回作用域

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <td><strong>Behandler</strong></td> 
     <td><strong>Ort</strong></td> 
     <td><strong>Reihenfolge</strong></td> 
     <td></td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="behand in behandler | orderBy: 'sort'"> 
     <td ng-hide="editActive">{{behand.name}}</td> 
     <td ng-hide="editActive">{{behand.ort}}</td> 
     <td class="index">{{behand.sort}}</td> 
     <td class="id" style="display:none">{{behand.id}}</td> 
     <td><a class="edit-button" ng-click="editBehandler(behand.id, behand.name, behand.ort, behand.sort)">Bearbeiten</a> &#124; <a class="delete-button" ng-click="deleteBehandler({{behand.id}})">Löschen</a></td> 
    </tr> 
    </tbody> 
</table> 

用戶能夠進行排序該表:

var fixHelperModified = function(e, tr) { 
     var $originals = tr.children(); 
     var $helper = tr.clone(); 
     $helper.children().each(function(index) { 
     $(this).width($originals.eq(index).width()) 
     }); 
     return $helper; 
    }, 
    updateIndex = function(e, ui) { 
     $('td.index', ui.item.parent()).each(function (i) { 
     $(this).html(i + 1); 
     // update the scope with the updated sorting values 
     }); 
    }; 

    $(".table tbody").sortable({ 
     helper: fixHelperModified, 
     stop: updateIndex 
    }).disableSelection(); 

該表更新不錯。新的排序值將被插入到正確的單元格中。但由jQuerys .html()函數插入的值不會反映到範圍中,因此我可以將其保存到數據庫中。

如何將顯示的排序值插入到作用域?

+0

jQuery的不提供雙向數據綁定車把確實.. 。所以我認爲你在使用jQuery更新DOM時會失去這種綁定。在這個環境中使用jQuery至關重要嗎? jQuery和Angular通常是不是......也許看看這個吧? http://ui-grid.info/ –

回答

0

爲了簡化問題,我只想用NG重複的$ index屬性,並刪除後面完全停止監聽器代碼:

<tr ng-repeat="behand in behandler | orderBy: 'sort'"> 
    <td ng-hide="editActive">{{behand.name}}</td> 
    <td ng-hide="editActive">{{behand.ort}}</td> 
    <td class="index">{{$index + 1}}</td> 
    <td class="id" style="display:none">{{behand.id}}</td> 
    <td><a class="edit-button" ng-click="editBehandler(behand.id, behand.name, behand.ort, $index + 1)">Bearbeiten</a> &#124; <a class="delete-button" ng-click="deleteBehandler({{behand.id}})">Löschen</a></td> 
</tr>