Question

我正在基于这样的数组显示输入

 <div data-ng-repeat="n in langInput.values">
    <input type="text"
           id="auction_name_{{n.selected}}"
           class="form-control"
           name="auction_name_{{$index}}"
           data-ng-model="inputs.auction_name[$index + 1]"
           data-ng-minlength="5"
           data-ng-maxlength="60"
           required />
    <span data-ng-show="sellItem['auction_name_'+$index].$error.required">Wymagane!</span>

这也使我能够进行angularjs验证。 <form>关闭后，我接下来要创建“下一步”按钮，但是我也想在此进行验证，因此，如果用户未完全填写所需的输入，则将无法单击它。

我ng-repeat使用的数组是：

$scope.langInput = {
    count: 3,
    values: [
        {
            id: "1",
            selected: "pl"
        },
        {
            id: "2",
            selected: "eng"
        }
    ],
    add: function () {
        if (this.count < 7) {
            this.values.push({id: this.count, selected: "eng"});
            this.count += 1;
            console.log(this.values);
        }
    },
    remove: function () {
        if (this.count > 2) {
            this.values.pop();
            this.count -= 1;
            console.log(this.count);
        }
    }
};

我知道我可以使用此ng-disabled指令，但是我不知道如何检查循环显示的输入，因为它的名称根据循环的$index而变化。

我已经创建了plunker

我的情况是，我知道当ng-disabled="sellItem.$error"的某些元素无效时我可以禁用按钮，但是在实际项目的表单中，我的表单要大得多，并且我有许多方法可以完成表单，所以在当用户完成填写表单时，用户仍然会收到一些甚至没有显示为无效的输入。

所以我不能使用ng-disabled="sellItem.$error"，因为在用户填写完表格后，他仍然在后台收到无效的输入。

我也无法将表单拆分为许多小表单，因为它将在提交时调用1个终结点。

我在真实项目中所做的是注入3个不同的按钮，并按正确的步骤显示它们。每个按钮都需要禁用ng，以使用户无需完成步骤的输入即可进入下一步。

因此ng-disabled="sellItem.$error"的接口中，我需要以ng-disabled的形式指定所有输入（大约5个输入）。

所以看起来像这样：

ng-disabled="sellItem.first_input.$error && 
sellItem.second_input.$error && ..."

我会这样做，但随后出现一个问题，我无法在ng-disabled内部“循环”，而我想在其中“循环”，因为输入名称是由JS生成的

name="auction_name_{{n.id}}"

它们不是恒定不变的，用户可以添加更多输入并删除它们

在页面开始时，我有两个输入，它们在JS运行后分别为name="auction_name_1"和name="auction_name_2"（由于绑定插值），因此用户可以输入第三个name="auction_name_3"，所以我不能还可以在ng-disabled中对它们进行硬编码。

Answer 1

我不知道如何检查循环显示的输入，因为其名称根据循环的$ index改变。

通常，将输入存储为对象在数组中的一个属性，以便随着对象在数组中位置的变化而与对象保持一致。

还使用对象的id属性：

<form name="sellItem" ng-submit="submit()">
    <div data-ng-repeat="n in langInput.values">
        <input type="text"
             id="auction_name_{{n.selected}}"
             class="form-control"
             ̶n̶a̶m̶e̶=̶"̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶_̶{̶{̶$̶i̶n̶d̶e̶x̶}̶}̶"̶
             name="auction_name_{{n.id}}"
             ̶d̶a̶t̶a̶-̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶i̶n̶p̶u̶t̶s̶.̶a̶u̶c̶t̶i̶o̶n̶_̶n̶a̶m̶e̶[̶$̶i̶n̶d̶e̶x̶ ̶+̶ ̶1̶]̶"̶
             data-ng-model="n.input"
             data-ng-minlength="5"
             data-ng-maxlength="60"
             required />
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.required">Wymagane!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.minlength">Za krótkie!</span>
        <span data-ng-show="sellItem['auction_name_'+n.id].$error.maxlength">Za długie!</span>
    </div>
    <button type="submit" ng-disabled="sellItem.$error">
          {{Submit}}
    </button>
</form>

请确保为id属性生成唯一值。

更新

添加了提交按钮。

有关更多信息，请参见

在ng-repeat循环的输入上禁用ng

1 个答案:

更新