使用 Angulars 的 Chosen 为选项元素动态生成 ID

Question

我们目前正在使用 chosen (https://harvesthq.github.io/chosen/) 生成多 select 下拉列表。我们的模板看起来像这样：

<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>

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

这样生成 html：

<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>

出于 selenium 测试的目的，我需要将 id 属性添加到列表项中。有没有办法用 angular 或选择来做到这一点？

我想要的是这样的：

<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，在一些刺激之后，提供了一个 link 到关于为什么你不应该混合 AngularJS 和 JQuery 的 SO 问题："Thinking in AngularJS" if I have a jQuery background? 最佳答案作者和该答案的最佳评论者之间的交流包含以下交流：

"I'm not rewriting FancyBox in jQuery to keep a pure Angular app." - 最佳评论者

"Most jQuery plugins can be rewritten in AngularJS cheaply...if you can't think of a solution, ask the community; if after all of that there is no easy solution, then feel free to reach for the jQuery" - 最佳回答者

所以为了澄清我的问题，是否有不需要我重写此 jQuery 插件的解决方案？

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

Answer 1

实现此目的的一种方法是编辑 chosen.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_index）。

另一个潜在的危险是这会影响页面上的所有下拉菜单，因此如果您只想在特定位置使用它们，则需要更优雅的解决方案。

编辑

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

使用 Angulars 的 Chosen 为选项元素动态生成 ID

Dynamically generating Ids for option elements with Angulars' Chosen

javascript

jquery

angularjs

angular-chosen