конфликт между sortable и js - PullRequest
0 голосов
/ 08 мая 2020

Я немного новичок в Angularjs. Я пытаюсь создать представление в Angularjs, в котором я хочу перетащить карточки. Сортировка работает нормально, но при удалении JS переменные не обновляются, следовательно, чтобы обновить их и БД, мы сделали вызовы API в функциях. Но похоже, что $ scope. $ Apply не работает.

HTML КОД:

 <div class="card-table-list" ng-repeat="statusFieldValue in statusFieldValues track by $index">
                <div class="">
                    <table class="ui-widget-header fixed_header">
                    <thead>
                        <tr>
                            <th>
                                <div>{$ statusFieldValue $}</div>
                            </th>
                        </tr>
                    </thead>

                    <tbody class = "sortable1">
                        <tr ng-repeat="form_obj_var in formObjectDict[statusFieldValue]['form_object_list'] track by $index">
                            <td class="ui-widget-content" ng-mousedown="storeFormObject(form_obj_var)">
                                <!-- Card Element-->
                                <div class="card-element">

                                    <div class="title-block">
                                        <div class="primary-info">{$ form_obj_var["title"] $}</div>
                                        <div class="secondary-info">Location: <small>Map Building 3rd floor</small>
                                        </div>
                                    </div>
                                    <div class="row bottom-block m-0">
                                        <div class="col-md-8 p-0">
                                            <span class="card-user-img"></span>
                                            <span class="card-user-day">Due: Monday</span>
                                        </div>
                                        <div class="col-md-4 p-0 priority-block">
                                            <span class="priority danger">
                                                {$ form_obj_var["subtitle"] $}
                                            </span>
                                            <!-- <span class="priority medium">
                                                Medium
                                            </span>
                                            <span class="priority low">
                                                Low
                                            </span> -->
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
</div></div>

Код в js для обновления JS переменные:

var i;
        i = $scope.formObjectDict[old_choice_val]["form_object_list"].findIndex(x => x.id === $scope.storedFormObject.id);

        $scope.formObjectDict[old_choice_val]["form_object_list"].splice(i,1);
        $scope.formObjectDict[old_choice_val]["total_form_objects"] = $scope.formObjectDict[old_choice_val]["total_form_objects"] - 1;


        var j = $scope.currentIndexofFO;
        $scope.storedFormObject["status_field_value"] = choice_val;
        $scope.formObjectDict[choice_val]["form_object_list"].splice(j,0, $scope.storedFormObject);
        $scope.formObjectDict[choice_val]["total_form_objects"] = $scope.formObjectDict[choice_val]["total_form_objects"] + 1;



        $timeout(function() {
            // $('.sortable1').sortable('cancel');
            $scope.$apply();
        }, 100);

enter image description here

...