Javascript 在AngularJS中组合替换和拖放

我正在创建一个包含以下实体的测验应用程序。当然还有其他实体（和财产），但这些是相关的实体：

• 测试（T）（Id、名称）

• 问题（Q）（Id、文本、FK\U测试）

• 问题行（QL）（Id，文本，FK_问题Id）

• 问题选项（QO）（Id，文本，FK_问题Id）

T和Q是不言自明的。QL和QO描述如下：

QL1:猫有腿和尾巴

QL2：你有两条腿

服务质量：1、2、3、4和5

然后，用户将QOs（可拖动）拖动到右侧可拖放位置（下划线/行）

QLText（QL实体，文本属性）的格式是“一只猫有[

]腿和[

]尾”，在将其呈现给用户之前，必须对其进行修改。因此，将为每个[

]插入一个可拖放项

我尝试了一个过滤器和一个指令，但最终得到的HTML是纯文本，或者至少是未经计算/编译的AngularJS代码和/或未正确绑定的下拉列表。我想要的，以及拖放插件所做的，是将DragTable的ngModel（这是一个QO对象）绑定到DropTable的ngModel，这是QL的一个属性（称为“objs”）。这里比较棘手的部分（至少对我来说）“objs”-属性必须是一个数组，因为它可以绑定多个对象

当用户按“下一步”转到下一个问题时，我将以以下格式保存答案：

[{id: <QLId>, value: [<QOId>]}]

[{id:，value:[]}]

所以对于每个QL，都会有一个id为QL的对象和一个选定QOID的数组

我目前正在使用此拖放插件：

以下是普通标记的粗略版本：

<ul>
  <li ng-repeat=”ql in QuestionLines” ng-model=”ql”>
    {{ ql.QLText }}
  </li>
</ul>

{{ql.QLText}}

所以问题是..

我如何用HTML替换[]s以启用可拖放功能并将可拖放的ngModel绑定到QL（或QL的Text属性中的可拖放）呢