Angular数据绑定到表,可能使用jQuery可排序

时间:2014-08-22 21:11:03

标签: jquery angularjs

我正在尝试将双向数据绑定(我认为)到一个表,所以当我对它进行排序时它将更新索引 - 我目前正在使用jQuery sortable来执行此操作。当然,我对其他选择持开放态度。

我正在使用this example,这似乎很老。所以我尝试类似的东西,因为这是期望的效果。最大的区别是我使用jQuery UI而不是angular-ui交易(也许这就是为什么它不能正常工作)。但基于小提琴这里是我的基本设置:

<form id="lessonInstructionPlan" class="lessonItem" ng-controller="instructionController">
    <div class="small-12 columns ">
        <div class="saInstPlanHead">
            <h5>Instructional Plan</h5>
        </div>
        <div class="lessonSASlider">
        <div class="row rowFix">

        <div class="small-12 columns text-right saInstrcutionTableCover">
            <div class="row rowFix">
                <div class="small-12 columns lessonItemHeader">
                    <h3>Manage</h3>
                </div>
            </div>
            <div class="row rowFix">
                <div class="hide-for-small medium-12 columns smallCover">
                <!-- Medium -large table -->
                <table class="saInstrcutionTable" cellspacing="0">
                    <thead>
                        <tr>
                            <th></th><th></th><th>Sub Level</th><th>Targets</th><th>Instructions</th><th>Response</th>
                        </tr>
                    </thead>
                    <tbody class="sortEmPls" ng-model="listTable">

                        <tr ng-repeat="item in listTable">
                            <td class="moveTableLevel"><div class="saTableUp"></div><div class="saTableDown"></div></td><td><input type="checkbox"></td><td>1. {{ $index }} </td><td>{{item}}</td><td>{{item}}</td><td>{{item}}</td>
                        </tr>

                    </tbody>
                </table>    
                <!-- End Medium -large table -->

(在此之下还有另一张移动桌子,为了时间的推移而被切断了。)

这是我的控制器的剪辑(只是给出了来自示例的硬编码数据)

.controller('instructionController', function($scope){

     $scope.listTable = ["one", "two", "thre", "four", "five", "six"];

 })

我只是在.sortEmPlease上调用jQuery可排序,这是表体。它工作正常,但似乎没有双向数据绑定并根据位置更新索引。

0 个答案:

没有答案