javascript - 在来自 ng-repeat 循环的输入上禁用 ng
问题描述
我正在显示基于这样的数组的输入
<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
.
解决方案
我不知道如何检查循环中显示的这些输入,因为它的名称根据循环的 $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
属性生成唯一值。
更新
添加了Submit按钮。
有关详细信息,请参阅
推荐阅读
- hive - 在 Hive 查询方面需要帮助
- sql - 在sql调度期间获取员工的空闲时间段
- cluster-analysis - k-means 算法的第一个质心应该是“随机的”?
- java - 自定义声音不播放 Firebase 消息 Android
- android-ndk - LOCAL_CFLAGS 和 APP_CFLAGS 有什么区别?
- python - Python 将 xml/字符串数据插入 PostgreSql 数据库
- sql - 如何从 MS Access 中的 SQL 编辑器运行 vba 函数
- python - Keys.ALT 和 Keys.LEFT_ALT 在硒中不起作用?(Python)
- python - Django Paginator - 我在继承自 Paginator 的类中创建了一个函数,以及为什么我不能在前端使用这个函数
- php - 如何捕获和格式化输出嵌套格式标签?