如何使用由 ng 重复轨道创建的量角器选择元素 $index.

Question

我需要选择ng-repeat创建的文本框，并使用sendKeys函数发送一些值。但我不确定选择文本框的方法。请建议一种方法来完成此操作，或者我应该改用 css 选择器。

<div class="qst_input_hld ng-scope" ng-repeat="option in options track by $index">
<input type="text" class="input-sm ng-pristine ng-valid" ng-model="options[$index]" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''">
<!-- ngIf: $index > 1 -->
</div>

Answer 1

有多种方法可以找到文本输入，并且由于那里有一个中继器，我怀疑有多个文本框。假设您要将密钥发送到第一个，这里有一个选项：

var desiredInput = element.all(by.repeater("option in options")).first().all(by.tagName("input")).first();
desiredInput.sendKeys("desired text");

请注意，您根本不需要处理track by部分 - 它被量角器（源代码参考）剥离。

另请注意，我刚刚使用了by.tagName()技术，该技术可能会也可能不会起作用，具体取决于您是否有其他input元素。您可以更严格地使用 CSS 选择器，例如检查占位符：

var desiredInput = element.all(by.repeater("option in options")).first().$('input[placeholder="Option 1"]');

并且，如果要将键发送到转发器中每个项目的输入元素，请使用each()：

element.all(by.repeater("option in options")).each(function (elm) {
    var desiredInput = elm.$('input[placeholder="Option 1"]');
    desiredInput.sendKeys("desired text");
});

Answer 2

为文本框提供名称和 id 属性：

<input ... name="your_textbox" id="textbox_{{index}}" />

如果要选择所有文本框：

document.getElementsByName("your_textbox");

特定文本框 ：

document.getElementById("textbox_"+i);   //i=index

通过量角器：首先将输入框的 ng 模型更改为：

<input type="text" class="input-sm ng-pristine ng-valid" ng-model="option" placeholder="Option 1" ng-class="isOptionEmpty[$index] ? 'error-border' : ''"> <!-- see ng-model=option -->

然后使用模型选择它：

var repeaterElements= element(by.repeater('option in options'));
repeaterElements.each(function(entry) {
    var input = entry.element(by.model("option"));
});