AngularJS UI-Sortable双向绑定问题

Question

我希望以最简单的方式解释这一点，但如果不清楚，请告诉我。

我正在使用AngularJS UI-Sortable来实现项目的拖放功能。从拖放的角度来看，一切都很好。它会按照预期在可丢弃区域中对其进行克隆。

但我遇到的问题是当项目被删除时我想让用户编辑文本。

    <div id="main_page" ui-sortable="sortableOptions" class="drop-area connected-drop-target-sortable" ng-model="selectedComponents">
    <div ng-repeat="component in selectedComponents track by $index" class="eq-height">
        <a href="#" group="content">
            <div class="element">

               <!-- Heading - Affected area -->
               <div class="component" ng-if="component.title == 'Heading'" ng-init="editing = false">
                  <input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
                  <h2 ng-click="editing = true" ng-hide="editing" ng-bind-html="component.element">{{component.element}}</h2>
               </div>

            </div>
        </a>
    </div>
</div>

那部分也可以。 但如果我删除第二个标题或更多双向绑定更新所有已删除的标题。

那么我想也许我需要在ng-model中传递$ index，因此angular知道哪一个正在更新：

<div id="main_page" ui-sortable="sortableOptions" class="drop-area connected-drop-target-sortable" ng-model="selectedComponents">
        <div ng-repeat="component in selectedComponents track by $index" class="eq-height">
            <a href="#" group="content">
                <div class="element">

                   <!-- Heading - Affected area -->
                   <div class="component" ng-if="component.title == 'Heading'" ng-init="editing = false">
                      <input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element[$index]" />
                      <h2 ng-click="editing = true" ng-hide="editing" ng-bind-html="component.element[$index]">{{component.element[$index]}}</h2>
                   </div>

                </div>
            </a>
        </div>
    </div>

但不幸的是，这没有任何影响。如果它有任何帮助，这是一个问题的图像。