Javascript 为选择了“角度”的选项元素动态生成ID

我们目前正在使用Selected生成一个多选下拉列表。我们的模板如下所示：

<label class="label">Our Section Header</label>
<div class="twoColMultiSelect">
  <select multiple chosen ng-model="formCtrl.List" ng-options="info.value for info in formCtrl.List | filter:{type : formCtrl.Types.TYPEWEWANTFORTHISPAGE}" data-placeholder="Select Field(s)">
  </select>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li class="active-result" style data-option-array-index="0">info item 1</li>
    <li class="active-result" style data-option-array-index="1">info item 2</li>
    <li class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li id="info-item-1" class="active-result" style data-option-array-index="0">info item 1</li>
    <li id="info-item-2" class="active-result" style data-option-array-index="1">info item 2</li>
    <li id="info-item-3" class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

上面的代码显示我们从控制器获取列表，从列表中过滤信息，然后显示为select的选项

这将生成如下所示的html：

<label class="label">Our Section Header</label>
<div class="twoColMultiSelect">
  <select multiple chosen ng-model="formCtrl.List" ng-options="info.value for info in formCtrl.List | filter:{type : formCtrl.Types.TYPEWEWANTFORTHISPAGE}" data-placeholder="Select Field(s)">
  </select>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li class="active-result" style data-option-array-index="0">info item 1</li>
    <li class="active-result" style data-option-array-index="1">info item 2</li>
    <li class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li id="info-item-1" class="active-result" style data-option-array-index="0">info item 1</li>
    <li id="info-item-2" class="active-result" style data-option-array-index="1">info item 2</li>
    <li id="info-item-3" class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

为了进行selenium测试，我需要向列表项添加id属性。有没有一种方法可以通过角度或选择来实现这一点

我想要的是这样的：

<label class="label">Our Section Header</label>
<div class="twoColMultiSelect">
  <select multiple chosen ng-model="formCtrl.List" ng-options="info.value for info in formCtrl.List | filter:{type : formCtrl.Types.TYPEWEWANTFORTHISPAGE}" data-placeholder="Select Field(s)">
  </select>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li class="active-result" style data-option-array-index="0">info item 1</li>
    <li class="active-result" style data-option-array-index="1">info item 2</li>
    <li class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

<div class="chosen-drop">
  <ul class="chosen-results">
    <li id="info-item-1" class="active-result" style data-option-array-index="0">info item 1</li>
    <li id="info-item-2" class="active-result" style data-option-array-index="1">info item 2</li>
    <li id="info-item-3" class="active-result" style data-option-array-index="2">info item 3</li>
   </ul>
</div>

我目前有一个解决方案，它通过获取DOM中的元素并在页面加载后生成ID来工作，但这似乎过于复杂

谢谢

更新

经过一番催促，lin提供了一个关于为什么不应该混合AngularJS和JQuery的问题的链接： 顶级答案作者和该答案的顶级评论者之间的交换包含以下交换：

我在jQuery中重写FancyBox并不是为了保留一个纯粹的角度应用程序顶级评论员

大多数jQuery插件都可以用AngularJS便宜地重写……如果你想不出解决方案，请咨询社区；如果在所有这些之后都没有简单的解决方案，那么请随意寻找jQuery-top的答案

为了澄清我的问题，有没有一种解决方案不需要我重写这个jQuery插件

---

为了清楚起见，并且希望避免像我和林那样的另一次交流——我是团队的一员。我没有重建应用程序的权限。我被要求执行一项特定的任务。我在团队管理层的约束下工作。我不会因为前端应用程序的设计决策或作为后端开发人员被要求查看前端的管理决策而辞职

实现这一点的一种方法是编辑所选的.jquery.min.js文件。该文件包含一个方法：

Chosen.prototype.choice_build = function (b) {
            var c, d, e = this;
            return c = a("<li />", {"class": "search-choice"}).html("<span>" + b.html + "</span>"), b.disabled ? c.addClass("search-choice-disabled") : (d = a("<a />", {"class": "search-choice-close", "data-option-array-index": b.array_index}), d.bind("click.chosen", function (a) {
                return e.choice_destroy_link_click(a)
            }), c.append(d)), this.search_container.before(c)
        }

我将其编辑为包含id属性，类似于：

Chosen.prototype.choice_build = function (b) {
            var c, d, e = this;
            return c = a("<li />", {"class": "search-choice"}).html("<span id= '" + b.html + "'>" + b.html + "</span>"), b.disabled ? c.addClass("search-choice-disabled") : (d = a("<a />", {"class": "search-choice-close", "data-option-array-index": b.array_index}), d.bind("click.chosen", function (a) {
                return e.choice_destroy_link_click(a)
            }), c.append(d)), this.search_container.before(c)
        }

显然，在这个特定的示例中，html可能不是唯一的，因此id也不会是唯一的，尽管您可以通过在id中包含其他信息（如b.array_索引）来轻松解决这个问题

另一个潜在的危险是，这将影响页面上的所有下拉列表，因此，如果您只希望它们位于特定位置，则需要更优雅的解决方案

编辑

---

应该提到的是，需要更改更多的方法-以上是一个此类方法的示例。在该文件中查找要添加ID的元素，并在此处进行编辑。

为什么要将jQuery插件与AngularJS一起使用？选择错误=选择什么？或者这是一个打字错误？另外，在AngularJS中使用jQuery插件有什么问题？对上述问题有可能得到一个有用的答案吗？为了清楚起见，我没有做出那个选择。如果问题不清楚-我在一个更大的团队中工作，因此使用了we，我被要求做一些事情，我正在寻找关于更好的方法的任何建议。我就是这样问的。你为什么把jQuery和AngularJS混在一起？呃，重复一遍——我没有。这一页已经混在一起了。我不知道是谁干的，也不知道为什么。更重要的是，我不知道为什么这是一件坏事。你能解释一下为什么这是件坏事吗？当然-