Question

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

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

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

这会生成如下的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属性。有没有办法用角度或选择这样做？

我想要的是这样的：

<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的SO问题的链接："Thinking in AngularJS" if I have a jQuery background? 最佳答案作者和该答案的最高评论者之间的交流包含以下交换：

“我不会在jQuery中重写FancyBox来保留纯粹的Angular应用程序。” - 最佳评论者

“大多数jQuery插件可以廉价地在AngularJS中重写......如果你想不出解决方案，请问社区;如果完全没有简单的解决方案，那么随时可以找到jQuery” - 顶级回答者

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

为了清楚起见，并希望避免像我和林某那样的另一次交流 - 我作为一个团队的一员工作。我没有重建应用程序的职权范围。我被要求执行一项特定的任务。我在团队管理的限制下工作。我不会放弃我在前端应用程序上的设计决策或管理决策上的工作，作为后端开发人员，我被要求查看前端。

Answer 1

实现此目的的一种方法是编辑selected.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'选择

1 个答案: